CSS CSS中的“缩放”有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10278783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What Does 'zoom' do in CSS?
提问by monk
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 ?
我发现一些 jQuery 插件，在他们的 css 规则中使用了“缩放”描述符，我什至查看了 w3c 网站，发现它是用来放大的，但我该如何实际实现呢？或者我必须定义一些视口？我如何定义这样的视口？或者我对整个事情都错了？
is it possible to use it like
是否可以像这样使用它
a {
zoom:1;
}
a:hover {
zoom:2;
}
回答by Joshua M
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.
缩放不包含在 CSS 规范中，但它在 IE、Safari 4、Chrome 中受支持（-moz-transform: scale(x)从 3.5 开始，您可以在 Firefox 中获得类似的效果）。见这里。
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
会将您的对象放大 2，因此就像将大小加倍一样。这意味着如果你有
a:hover {
zoom: 2;
}
On hover, the <a>tag will zoom by 200%.
悬停时，<a>标签将放大 200%。
Like I say, in FireFox 3.5+ use -moz-transform: scale(x), it does much the same thing.
就像我说的，在 FireFox 3.5+ 中使用-moz-transform: scale(x)，它的作用大致相同。
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 zoomdoes, 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 zoomis not supported in Opera.
编辑：为了回应来自 的评论thirtydot，我会说这scale()不是一个完整的替代品。它不会像zoom那样按直线扩展，而是会开箱即用地扩展内容，而不是强制其他内容。在此处查看此操作。此外，似乎zoom在 Opera 中不支持。
Thispost gives a useful insight into ways to work around incompatibilities with scaleand workarounds for it using jQuery.
这篇文章提供了scale有关使用 jQuery 解决不兼容问题的方法和解决方法的有用见解。
回答by Ilia Akhmadullin
回答by commonpike
zoom is a css3 spec for the @viewport descriptor, as described here
zoom 是@viewport 描述符的 css3 规范，如此处所述
http://dev.w3.org/csswg/css-device-adapt/#zoom-desc
http://dev.w3.org/csswg/css-device-adapt/#zoom-desc
used to zoom the entire viewport ('screen'). it also happens to zoom individuals elements in a lot of browsers, but not all. css3 specifies transform:scale should be used to achieve such an effect:
用于缩放整个视口（“屏幕”）。它也恰好在许多浏览器中缩放单个元素，但不是全部。css3 指定应该使用 transform:scale 来实现这样的效果：
http://www.w3.org/TR/css3-transforms/#transform-functions
http://www.w3.org/TR/css3-transforms/#transform-functions
but it works a little different than the 'element zoom' in those browsers that support it.
但它的工作原理与支持它的浏览器中的“元素缩放”略有不同。
回答by Adesh M
CSS zoomproperty is widely supported now > 86% of total browser population.
CSSzoom属性现在得到了广泛支持，超过浏览器总数的 86%。
See: http://caniuse.com/#search=zoom
请参阅：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>
回答by Scriptor
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>
回答by Rudi Visser
Only IE and WebKit support zoom, and yes, in theory it does exactly what you're saying.
只有 IE 和 WebKit 支持缩放，是的，理论上它完全符合您的要求。
Try it out on an image to see it's full effect :)
在图像上试一试，看看它的全部效果:)
回答by Key-Six
As Joshua M pointed out, the zoom function isn't supported only in Firefox, but you can simply fix this as shown:
正如 Joshua M 指出的那样，缩放功能不仅在 Firefox 中受支持，但您可以简单地修复此问题，如下所示：
div.zoom {
zoom: 2; /* all browsers */
-moz-transform: scale(2); /* Firefox */
}
