CSS缩放的替代解决方案

Question

我使用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？

Answer 1

你能把所有东西都包装在另一个div中并在那个包装器上将比例设置为.5吗？

Answer 2

我发现通过设置固定的高度/宽度和溢出来隐藏这种效果是可能的：隐藏在包含“transform scale”'d元素的元素上，从而隐藏了由缩放产生的溢出。