CSS缩放的替代解决方案(Alternate solution for CSS zoom)

CSS缩放的替代解决方案(Alternate solution for CSS zoom)

我使用CSS zoom来缩小大div的预览。

<div id="layoutEditCanvas" style="width:1920px;height:1080px;background:url('{{layout.backgroundImage}}')"> </div>

zoom设置如下：

zoom:0.5;

现在，FF不支持zoom所以我必须使用

-moz-transform: scale(0.5); -moz-transform-origin: 0 0;

我的问题是，当Chrome使用CSS zoom并将我的div缩小到960 x 540时，FF会将div保留为原始大小并仅缩放其内容，从而在缩小内容周围留下巨大的空白空间。

是否有一个参数让（缩放）变换表现得像zoom ？

I use CSS zoom to shrink the preview of a big div.

<div id="layoutEditCanvas" style="width:1920px;height:1080px;background:url('{{layout.backgroundImage}}')"> </div>

zoom set like this:

zoom:0.5;

Now, FF doesn't support zoom so I have to use

-moz-transform: scale(0.5); -moz-transform-origin: 0 0;

My problem is that while Chrome takes the CSS zoom and shrinks my div to 960 x 540, FF leaves the div with its original size and only scales its contents, leaving me with a huge empty space around the shrunk content.

Is there a parameter to have the (scale) transform to behave like zoom?

最满意答案

你可以将所有内容包装在另一个div中并将该比例设置为该包装器上的.5吗？

I found that it's possible to avoid this effect by setting fixed height/width and overflow:hidden on the element wrapping the "transform scale"'d element, thus hiding that overflow created by the scaling.