通过百分比缩放div的内容？

Question

构建一种CMS，用户可以移动盒子来构建页面布局（至少是基本想法）。

我希望从数据库中提取实际内容并构建“页面”，但其显示比例为50%。

我意识到我可以有两组CSS-一个用于实际的前端页面，另一个用于管理工具，并相应地缩小一切，但这似乎很难维护。

我希望可能有一些jQuery或CSS或其他东西可以使我填充一个div并给它50％比例的属性。

- Dave

---

可能是跨浏览器CSS缩放的完整样式的重复问题。 - Chris Moschini

Answer 1

你可以简单地使用zoom属性：zoom。

#myContainer{
    zoom: 0.5;
    -moz-transform: scale(0.5);
}

myContainer包含您正在编辑的所有元素。这在所有主要浏览器中都受支持。

- Benjamin Gruenbaum

---

只是出于好奇，如果“zoom”在所有主要浏览器中都受支持，为什么需要使用“-moz-transform: scale(0.5);”？或者，这两个语句是否都需要覆盖所有浏览器？ - rinogo

根据Can I use的数据显示，目前Firefox浏览器不支持zoom属性，因此我认为这就是为什么要包含-moz-transform的原因。 - Venning

这节省了我很多时间！ - Shah Abaz Khan

@BenjaminGruenbaum https://dev59.com/-F8d5IYBdhLWcg3wvkSN - adamj

如果在Firefox上显示效果不佳（即未对齐），请添加以下属性 transform-origin: 0 0 或 -moz-transform-origin: 0 0 来进行修复！ - supersan

Answer 2

这个跨浏览器库看起来更安全 - 只使用缩放和moz-transform可能不如jquery.transform2d的scale()覆盖更多的浏览器。

http://louisremi.github.io/jquery.transform.js/

例如：

$('#div').css({ transform: 'scale(.5)' });

更新

好的- 我看到人们在没有解释的情况下将此投票否决。另一个答案在旧版Safari中无法工作(运行Tiger的人)，而且它不会在某些较早版本的浏览器中一致地工作-也就是说，它确实缩放了东西，但是以非常像素化的方式进行，或者以一种与其他浏览器不匹配的方式移动元素的位置。

http://www.browsersupport.net/CSS/zoom

或者只需要查看这个问题，这个问题可能只是一个重复:

跨浏览器CSS缩放的完整样式

- Chris Moschini

---

转换和缩放是现代的方法 :) - frage

但它不会像缩放一样调整宽度/高度，它们的工作方式是不同的。 - Aurelian Spodarec