发表新帖
发表新帖

How can I zoom an HTML element in Firefox and Opera?

前端 未结
关注
12 637
猫巷女王i
猫巷女王i 2020-11-29 02:00

How can I zoom an HTML element in Firefox and Opera?

The zoom property is working in IE, Google Chrome and Safari, but it’s not working in Firefox and O

相关标签:
12条回答
  • 耶瑟儿～
    2020-11-29 02:45

    Only correct and W3C compatible answer is: <html> object and rem. transformation doesn't work correctly if you scale down (for example scale(0.5).

    Use: 

    html
{
   font-size: 1mm; /* or your favorite unit */
}

    and use in your code "rem" unit (including styles for <body>) instead metric units. "%"s without changes. For all backgrounds set background-size. Define font-size for body, that is inherited by other elements.

    if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or JS).

    for example:

    @media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

    This makes equivalent of zoom:0.5 without problems in JS with clientX and positioning during drag-drop events.

    Don't use "rem" in media queries.

    You really doesn't need zoom, but in some cases it can faster method for existing sites.

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-29 02:46

    I've been swearing at this for a while. Zoom is definitely not the solutions, it works in chrome, it works partially in IE but moves the entire html div, firefox doesnt do a thing.

    My solution that worked for me was using both a scaling and a translation, and also adding the original height and weight and then setting the height and weight of the div itself:

    #miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

    Obviously change these to your own needs. It gave me the same result in all browsers.

    0 讨论(0)
  • 鱼传尺愫
    2020-11-29 02:48

    Try this code, this’ll work:

    -moz-transform: scale(2);

    You can refer to this.

    0 讨论(0)
  • 清酒与你
    2020-11-29 02:49

    Zoom and transform scale are not the same thing. They are applied at different times. Zoom is applied before the rendering happens, transform - after. The result of this is if you take a div with width/height = 100% nested inside of another div, with fixed size, if you apply zoom, everything inside your inner zoom will shrink, or grow, but if you apply transform your entire inner div will shrink (even though width/height is set to 100%, they are not going to be 100% after transformation).

    0 讨论(0)
  • 天命终不由人
    2020-11-29 02:49

    Use scale instead! After many researches and tests I have made this plugin to achieve it cross browser:

    $.fn.scale = function(x) {
    if(!$(this).filter(':visible').length && x!=1)return $(this);
    if(!$(this).parent().hasClass('scaleContainer')){
        $(this).wrap($('<div class="scaleContainer">').css('position','relative'));
        $(this).data({
            'originalWidth':$(this).width(),
            'originalHeight':$(this).height()});
    }
    $(this).css({
        'transform': 'scale('+x+')',
        '-ms-transform': 'scale('+x+')',
        '-moz-transform': 'scale('+x+')',
        '-webkit-transform': 'scale('+x+')',
        'transform-origin': 'right bottom',
        '-ms-transform-origin': 'right bottom',
        '-moz-transform-origin': 'right bottom',
        '-webkit-transform-origin': 'right bottom',
        'position': 'absolute',
        'bottom': '0',
        'right': '0',
    });
    if(x==1)
        $(this).unwrap().css('position','static');else
            $(this).parent()
                .width($(this).data('originalWidth')*x)
                .height($(this).data('originalHeight')*x);
    return $(this);
};

    usege:

    $(selector).scale(0.5);

    note:

    It will create a wrapper with a class scaleContainer. Take care of that while styling content.

    0 讨论(0)
  • 忘了有多久
    2020-11-29 02:52

    does this work correctly for you? : 

    zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
    0 讨论(0)
 看不清?
提交回复
热议问题