javascript - 按百分比缩放div的内容？

Question

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

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

我意识到我可以有 2 组 CSS - 一组用于实际的正面页面，一组用于管理工具，然后相应地缩小所有内容，但这似乎很难维护。

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

score 153 · Accepted Answer

您可以简单地使用缩放属性：

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

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

score 31 · Accepted Answer

这个跨浏览器库似乎更安全——只是缩放和 moz-transform 不会像 jquery.transform2d 的 scale() 那样覆盖那么多浏览器。

例如

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

更新

好的 - 我看到人们在没有解释的情况下投票否决。此处的另一个答案在旧 Safari（运行 Tiger 的人）中不起作用，并且在某些旧浏览器中无法始终如一地工作 - 也就是说，它确实可以缩放东西，但它以一种非常像素化或转移的方式这样做元素的位置与其他浏览器不匹配。

或者看看这个问题，这个问题很可能只是一个骗局：