html - 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

我发现可以通过设置固定高度/宽度和 overflow:hidden 来避免这种影响，该元素包装了“transform scale”的元素，从而隐藏了缩放产生的溢出。