什么是“缩放”在CSS中做什么?

我发现一些jQuery插件,在他们的CSS规则中使用“缩放”描述符,我甚至看着W3C网站,发现它被用来放大,但我怎么能真正实现它? 或者我必须定义一些视口? 而我该如何定义这样的视口? 或者我错了整个东西?

是否有可能像使用它

a { zoom:1; } a:hover { zoom:2; } 

缩放不包含在CSS规范中,但在IE,Safari 4,Chrome中都可以支持(在3.5版本中,你可以使用-moz-transform: scale(x)得到与Firefox有点相似的效果)。 看到这里 。

所以,所有的浏览器

  zoom: 2; zoom: 200%; 

会把你的物体缩小2倍,所以就像加大了一样。 这意味着如果你有

 a:hover { zoom: 2; } 

hover时, <a>标签将缩小200%。

就像我说的,在FireFox 3.5+中使用-moz-transform: scale(x) ,它的function也是一样的。

编辑:在回应评论从thirtydot ,我会说scale()不是一个完整的替代。 它不会像zoom一样扩展,而是会扩展出所有内容,而不是强制其他内容。 在这里看到这个行动。 而且,Opera似乎并不支持zoom

这篇文章提供了一个有用的见解,以解决使用jQuery的scale和解决方法的不兼容问题。

惊讶的是,没有人提到, zoom: 1; 对于IE6-7是有用的,通过触发hasLayout解决大多数只IE的错误。

该属性控制当前元素的放大级别。 元素的渲染效果是相机上的“缩放”function。 即使这个属性没有被inheritance,它仍然会影响子元素的渲染。

  div { zoom: 200% } <div style=”zoom: 200%”>This is x2 text </div> 

zoom是@viewport描述符的css3规范,如此处所述

http://dev.w3.org/csswg/css-device-adapt/#zoom-desc

用于缩放整个视口(“屏幕”)。 它也碰巧在很多浏览器中缩放个人元素,但不是全部。 css3指定了transform:scale应该用来达到这样的效果:

http://www.w3.org/TR/css3-transforms/#transform-functions

但是它与那些支持它的浏览器中的“元素缩放”有些不同。

只有IE和WebKit支持缩放,是的,从理论上说,它确实如你所说。

尝试一下图片看看它的全部效果:)

CSS zoom属性现在被广泛支持,占浏览器总量的86%。

请参阅: http : //caniuse.com/#search=zoom

 document.querySelector('#sel-jsz').style.zoom = 4; 
 #sel-001 { zoom: 2.5; } #sel-002 { zoom: 5; } #sel-003 { zoom: 300%; } 
 <div id="sel-000">IMG - Default</div> <div id="sel-001">IMG - 1X</div> <div id="sel-002">IMG - 5X</div> <div id="sel-003">IMG - 3X</div> <div id="sel-jsz">JS Zoom - 4x</div> 

正如Joshua M指出的那样,只有在Firefox中才支持缩放function,但是您可以简单地修复它,如下所示:

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