Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What Does 'zoom' do in CSS?

Tags:

css

I found that some jQuery Plugin, in their css rule uses 'zoom' descriptor, I even Look into w3c website and found that it is used to magnify but how can I actually implement it? Or I have to Define some viewport? And how do I define such viewport ? Or i am wrong about the whole stuff ?

is it possible to use it like

a {     zoom:1; }  a:hover {    zoom:2; } 
like image 648
monk Avatar asked Apr 23 '12 10:04

monk


People also ask

How does Zoom work CSS?

CSS zoom works based on attribute value provided to the zoom attribute. If we pass zoom attribute value as normal then size becomes 100%. If we pass zoom attribute value as reset then it will reset back to original size from user custom values like 120%, 70%, 150%, etc.

How do you deal with zoom in CSS?

To fix the problem with zooming in, try adding the min-width attribute to your outer countainer ( #container or #navbar ?). Setting min-width prevents the webpage from trying to shrink down beyond the specified width (i.e. 300px).

How do I zoom my screen in CSS?

The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.


1 Answers

Zoom is not included in the CSS specification, but it is supported in IE, Safari 4, Chrome (and you can get a somewhat similar effect in Firefox with -moz-transform: scale(x) since 3.5). See here.

So, all browsers

 zoom: 2;  zoom: 200%; 

will zoom your object in by 2, so it's like doubling the size. Which means if you have

a:hover {    zoom: 2; } 

On hover, the <a> tag will zoom by 200%.

Like I say, in FireFox 3.5+ use -moz-transform: scale(x), it does much the same thing.

Edit: In response to the comment from thirtydot, I will say that scale() is not a complete replacement. It does not expand in line like zoom does, rather it will expand out of the box and over content, not forcing other content out of the way. See this in action here. Furthermore, it seems that zoom is not supported in Opera.

This post gives a useful insight into ways to work around incompatibilities with scale and workarounds for it using jQuery.

like image 136
Joshua M Avatar answered Oct 08 '22 21:10

Joshua M