CSS 以 100% 宽度缩放元素

Question

我对缩小 100% 宽度的 div 感兴趣。我遇到的问题是，当我将元素缩放时，它会得到一个固定的宽度，并且不再延伸 100% 的宽度。

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

当我使用 CSS 缩放属性（而不是变换：缩放）时，它按预期工作，但我听说缩放属性没有得到很好的支持。我的问题是这可以通过 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%;
}​