我使用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.
更多推荐
发布评论