CSS ZOOM
This property controls the magnification level for the current element. The rendering effect for the element is that of a “zoom” function on a camera. Even though this property is not inherited, it still affects the rendering of child elements.
Example
| div { zoom: 200% }
<div style=”zoom: 200%”>This is x2 text </div> |
Possible Values
| Value | Description |
|---|---|
| normal | No magnification is applied. The object is rendered as it normally would be. |
| [number] | Positive floating point number indicating a zoom factor. Numbers smaller than 1.0 indicate a “zoom out” or size reduction effect, while numbers greater than 1.0 indicate a magnifying effect. |
| [percentage] | Positive floating point number, followed by a percentage character (”%”) which indicates a zoom factor. Percentages smaller than 100% indicate a “zoom out” or size reduction effect, while numbers greater than 100% indicate a magnifying effect. |
div.zoom { zoom: 3; }
________________________
1))))))))))))))002 003 004 005 006 007 008 009 010 011 012 013 014 015
2))))))))))))))002 003 004 005 006 007 008 009 010 011 012 013 014 015
this code would display the numbers of same size. so what does actually zoom property magnifies?
as far as I can tell there is no “zoom” property in CSS, up to CSS3.
KattyKatty, the ZOOM works on objects. As far as I know, it only works in IE, like so:
iframe style=”zoom: 75%” align=”center” height=”480″ width=”640″ src=”http://www.google.com/”
/iframe
Doesn’t work on Firefox, but works in Safari, however, the down side is that you have to design your structure in a way that you have the space for the zoomed component already there, as if you use fixed structuring, your page layout breaks up.
I suggest you dont mess with zoom until it becomes supported by all the browsers.
You may also add zoom class to span tag to modify text object
I agree with Danny. I would avoid zoom. Why not use just font-size: 200%? It is standard and supported.
i check this code but i could not see any result on mozila ?…..
zoom is an IE option that fixes several bugs with the display of layers in IE 7 and below.
It will be immensely useful when all the browsers implement the zoom feature. Right now my pages are defined in absolute (pixel) terms, using mostly scalable vector graphics, & it will be so nice to be able to automatically scale the entire page to fill any browser window.
It works in IE only
I agree, using a CSS feature which isn’t supported by the main browsers just complicates things…
The Zoom property is supported in all major browsers except Firefox 3.6. (Chrome, Opera, Safari, and IE8). This is verified.
zoom: 50%; is not working for me in Safari 4.0.5
Can anyone help?
its supports in IE, but i don’t think it works in Firefox and other modern browsers
For Firefox, you can use the -moz-transform property with scale option. -moz-transform : { scale (0.5) }