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:
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.
YMMD with that awnser! TX
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.
Not equivalent! Delete this page!
I added example, it works.
It “works” doesn’t mean it is equivalent with transform. You might want to check this, in case you have not: http://css-tricks.com/almanac/properties/z/zoom/
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 🙂
hmm, I’m comparing my examples in all browsers, looks the same
IE9, FF, Chrome gives same result.
doesnt works in IE8.
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.
yes, on windows opera it also doesn’t work
So your solution does not support Opera, as it says in topic description ^^.
this is wrong. scale does scale percentage values, zoom does not. this only works with absolute sizes in pixels….
That is correct.
transform:scale(2) is the css3 standard. zoom is a legacy explorer<9 feature, avoid it.
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
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…
Thank you for the tipp!
very helpful thank you so much
how about a “zoom” function on a camera??
Ex: div {
zoom: 200%
}
NICE ANSWER< THNAKS!
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.
yeah i agree with u mate ,
me also got same problem like you
Just add margin to the body tag. Thats all.
-moz-transform: scale(n) isn’t like zoom … not just add margin and in mobile view it’s doesn’t act like zoom
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 🙂