CSS Zoom in Browsers

CSS Zoom property, supported in IE 5.5+, Opera, and Safari 4, and Chrome.

Firefox is the only major browser that does not support zoom, but you could use -moz-transform since Firefox 3.5.

div.zoom {
      zoom: 2; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}

 

Example:

test zoom 2
test zoom 1

Update for 2016: Today we can just use transform: scale CSS.

It’s already works in all browsers. Scale could be written as  (X,Y) or just 1 time for both X and Y, for example (0.5)

-moz-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);

Transform could leave a white space around element that got smaller size after rendering (transform applies after rendering) and to minimize empty spacing issues we can use transform-origin CSS.

-moz-transform-origin: left top;
-ms-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;

Could be in percents or pixels too.

It’s a good idea to add max-height or a negative margin at the bottom to an element that got resized. Together with media queries it works. It could remove vertical space below resized element, when transform-origin is top.

Share:
This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

25 Responses to CSS Zoom in Browsers

  1. Gerry says:

    YMMD with that awnser! TX

  2. K.Sya says:

    thanks buddy.
    the -moz-transfor:scale is not equals css zoom , I’m trying to create a report viewer for my web application but I have some problems with -moz-transform:scale such as that , the behavior between moz-transform and zoom in a div with overflow:auto isn’t one thing.

  3. Michael says:

    Not equivalent! Delete this page!

  4. Tom says:

    nooo, im afraid he as referring to the fact that

    zoom: 2; /* all browsers */
    -moz-transform: scale(2); /* Firefox */

    do not create consistent results cross browser,

    i.e
    zoom: 2; /* all browsers */does not look the same as -moz-transform: scale(2); /* Firefox */ does on firefox. therefore they are not equivalent, cannot be subsituted for each other and this post is misleading 🙂

  5. Dracco says:

    Im using Opera 11.61 on Linux Mint, both of the above look the same and these are not zoomed. Checked it with Firefox, only test zoom 2 is bigger, same with Chromium.

  6. Peter Seychell says:

    this is wrong. scale does scale percentage values, zoom does not. this only works with absolute sizes in pixels….

  7. pike says:

    transform:scale(2) is the css3 standard. zoom is a legacy explorer<9 feature, avoid it.

    • Ryan says:

      Actually pike, that is incorrect. Zoom is a part of the CSS3 standard. See here: http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor

    • pike says:

      I stand corrected ! As the link says (thanks), it is a @viewport descriptor. This is different from the traditional IE zoom. I still dont think it can be properly used in “div.zoom” as mentioned above, even if it works in most browsers. it should be used to zoom the whole ‘screen’ (starting at 0,0).

      css:transform is quite something else, it is used to transform separate elements (starting at a given transform-origin). so for the above usage, i would still use that if available…

  8. Mirco says:

    Thank you for the tipp!

  9. Anees says:

    very helpful thank you so much

  10. Nguyen Vu says:

    how about a “zoom” function on a camera??
    Ex: div {
    zoom: 200%
    }

  11. LOLROBOT says:

    NICE ANSWER< THNAKS!

  12. Mateus Leon says:

    This don’t replace the original functionality of zoom, if so Chrome, Safari, and others wouldn’t have one CSS Transform too!

    Your example show “virtually” that it do the same thing, but doesn’t: the final dimensions of the element are the same, which doesn’t occur on zoom property.

    If you zoom out/in something, the dimensions will suffer reflections. Your example, on web tools, shows exactly what I’m saying.

    Try put “zoom: 2” on one element and toggle it continuously between 1 and 2 and you will see that it moves all elements that depend on it to be positioned. However, with “transform: scale(2);”, if you do the same, it doesn’t move anything, overlapping only.

  13. Paris says:

    Just add margin to the body tag. Thats all.

  14. Matt says:

    -moz-transform: scale(n) isn’t like zoom … not just add margin and in mobile view it’s doesn’t act like zoom

  15. Download mp3 gratis says:

    0

    https://caniuse.com/#search=zoom This will tell you what is compatable for each browsers. Not a solution but this is why it’s not working in moz.

    Just a little searching comes up with using this

    .zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(2);
    -webkit-transform-origin: 0 0;
    transform: scale(2); /* Standard Property */
    transform-origin: 0 0; /* Standard Property */
    }

    That should do what you’re after 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *