CSS缩放元素并使其宽度为100%

Question

我希望能够将一个宽度为100%的div元素进行缩放。但是问题在于，当我将该元素进行缩放时，它会获得固定的宽度，不再延伸至100%的宽度。

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

当我使用CSS的zoom属性（而不是transform：scale）时，效果符合预期，但我听说zoom属性并不被广泛支持。我的问题是，是否可以使用CSS transform scale来实现这个效果？

- levi

---

CSSзҡ„zoomеұһжҖ§зЎ®е®һж”ҜжҢҒдёҚдҪігҖӮFirefoxе’ҢOperaйғҪдёҚж”ҜжҢҒе®ғгҖӮ - thirtydot

这是你想要的吗？http://jsfiddle.net/thirtydot/Fz7qh/5/ - thirtydot

@thirtydot 的想法很有趣。看起来可行。请将其发布为答案，以便我可以接受它。 - levi

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%;
}​

- thirtydot

---

我刚刚添加了 box-sizing: border-box;，以确保 padding 也包含在 width 中。 - M. Ahmad Zafar

在IE11中，我点击图像后会出现滚动条。有任何想法为什么会这样？ - mrówa

好的，我已经找到了：您需要添加外部元素并根据缩放比例进行缩放，就像这里一样http://jsfiddle.net/v2fukeq5/11/（+对于非固定高度的溢出）。 - mrówa