按百分比缩放div的内容？

构建各种CMS，用户可以在其中移动框以构建页面布局（无论如何都是基本思想）。

我想从数据库中提取实际内容并构建“页面”，但是将其以50％的比例显示。

我意识到我可以拥有两套CSS-一套用于实际的前置页面，一套用于管理工具，并相应地收缩所有内容，但这似乎很难维护。

我希望可能会有某种jquery或CSS或某种能让我填充div并为其提供50％比例的属性（？）的东西。

javascript jquery css scale

— 戴夫
source

跨浏览器CSS缩放

— Chris Moschini 2014年

Answers:

136

您可以简单地使用zoom属性：

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

myContainer包含您正在编辑的所有元素。所有主要浏览器均支持此功能。

— 本杰明·格伦鲍姆（Benjamin Gruenbaum）
source

出于好奇，如果zoom所有主流浏览器都支持，为什么-moz-transform: scale(0.5);需要？或者，是否需要两个语句才能覆盖所有浏览器？

— rinogo '16

@rinogo根据我可以不使用Firefox支持的当前版本zoom，所以我认为这-moz-transform就是其中的原因。

— 维宁

这节省了我很多时间！

— 莎阿巴兹汗

@BenjaminGruenbaum stackoverflow.com/questions/26488960/zoom-vs-scale-in-css3

— adamj

如果在Firefox上效果不佳（即对齐不正确），请添加此属性transform-origin: 0 0或-moz-transform-origin: 0 0进行修复！

— supersan '18年

这个跨浏览器的lib似乎更安全-缩放和moz-transform不会像jquery.transform2d的scale（）那样覆盖许多浏览器。

例如

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

更新资料

好的-我看到人们对此一无所获。这里的另一个答案在旧版Safari（运行Tiger的人）中将不起作用，并且在某些旧版浏览器中将无法始终如一地工作-也就是说，它确实可以缩放内容，但是这样做的方式非常像素化或移动了元素的位置与其他浏览器不匹配。

或者只是看这个问题，这个问题可能只是以下原因的虚假形式：

— 克里斯·莫斯基尼
source

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

— frage