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

Question

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 Opera.

Is there any method for adding this property to Firefox and Opera?

Solution 1

Try this code, this’ll work:

-moz-transform: scale(2);

You can refer to this.

Solution 2

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).

Solution 3

For me this works to counter the difference between zoom and scale transform, adjust for the intended origin desired:

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

Solution 4

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.

Solution 5

I would change zoom for transform in all cases because, as explained by other answers, they are not equivalent. In my case it was also necessary to apply transform-origin property to place the items where I wanted.

This worked for me in Chome, Safari and Firefox:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

View more solutions

Comments

[Ben]

I'd refer you to this question which answers yours pretty thoroughly.

[Admin]

Ya this is working perfectly. Is there is any method to change -moz-transform scaling factor to percentage

[sholsinger]

It is a percentage in decimal form. (1 = 100% 2 = 200% 0.2 = 20%) But I believe you can use the percentage notation as well. w3.org/TR/css3-values/#percentages

[Tom Roggero]

The problem with this, is when you have fixed position elements. Zoom works in a different way than transform scale.

[Cory Mawhorter]

Also... what happens when ff supports zoom? Will this double zoom? This doesn't seem like the solution imo.

[Ales Ruzicka]

This zooms 2x in webkit. Fist by zoom, second by scale

[colin rickels]

this doesnt work with a sprite image though where we actually need to zoom in on a specific part of the image.

[Andrija]

Meanwhile in 2010.

[umutesen]

You can make this even more awesome by handling border width of the scaled element.. .width($(this).data('originalWidth') * x + borderWidth)

[Honza Zidek]

This is the only correct answer! Scale alone leaves the original size of the element untouched.

[Stu Blair]

This was the only answer that helped me solve my issue, which is that I wanted to scale elements up/down while maintaining the same width, so that more smaller elements would fit on the same row. All I had to do was scale the CSS width % as an inverse proportion to the CSS scale factor