CSS 缩放元素宽度为 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10937154/
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
CSS Scale an element with 100% width
提问by levi
I am interested in zooming out a div with 100% width. The problem I am having, is when I scale the element out it gets a fixed width and no longer extends 100% of the width.
我有兴趣缩小 100% 宽度的 div。我遇到的问题是，当我缩放元素时，它会得到一个固定的宽度，不再扩展 100% 的宽度。
Example - http://jsfiddle.net/Fz7qh/2/
示例 - http://jsfiddle.net/Fz7qh/2/
When I use the CSS zoom property (as opposed to transform: scale) it works as expected, but I hear the zoom property is not well supported. My question is can this be achieved with CSS transform scale?
当我使用 CSS 缩放属性（而不是转换：缩放）时，它按预期工作，但我听说缩放属性没有得到很好的支持。我的问题是这可以通过 CSS 变换比例来实现吗？
回答by thirtydot
To emulate what the zoomproperty does in this case, you can add -transform-origin: 0 0;and set the widthto oldWidth / newScale(100 / 0.7 ~= 142.857143):
要模拟该zoom属性在这种情况下的作用，您可以添加-transform-origin: 0 0;并设置width为oldWidth / newScale( 100 / 0.7 ~= 142.857143)：
http://jsfiddle.net/thirtydot/Fz7qh/5/
http://jsfiddle.net/thirtydot/Fz7qh/5/
div.zoomed {
-webkit-transform: scale(.7);
-webkit-transform-origin: 0 0;
width: 142.857143%;
}?
