CSS 将元素缩放为 100% 宽度

Question

我有兴趣缩小宽度为 100% 的 div。我遇到的问题是，当我向外扩展元素时，它会获得固定宽度，不再延伸 100% 的宽度。

示例 - http://jsfiddle.net/Fz7qh/2/

当我使用 CSS 缩放属性(而不是 transform: scale)时，它按预期工作，但我听说缩放属性没有得到很好的支持。我的问题是这可以通过 CSS 变换比例来实现吗？

Answer 1

要模拟 zoom 属性在这种情况下的作用，您可以添加 -transform-origin: 0 0; 并设置 width到 oldWidth/newScale(100/0.7 ~= 142.857143):

http://jsfiddle.net/thirtydot/Fz7qh/5/

div.zoomed {
    -webkit-transform: scale(.7);
    -webkit-transform-origin: 0 0;
    width: 142.857143%;
}​