按百分比缩放div的内容？

Posted 2023-02-16

【中文标题】按百分比缩放div的内容？

【英文标题】：Scale the contents of a div by a percentage?

【发布时间】：2013-06-24 08:53:23

【问题描述】：

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

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

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

我希望可能有某种 jquery 或 CSS 或其他东西可以让我填充 div 并为其赋予 50% 比例的属性 (?)。

【问题讨论】：

complete styles for cross browser CSS zoom的可能重复

【参考方案1】：

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

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

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

【讨论】：

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

@rinogo 根据Can I use，当前版本的 Firefox 不支持zoom，所以我认为这就是包含-moz-transform 的原因。

这节省了我很多时间！

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

如果它在 firefox 上看起来不太好（即没有正确对齐）添加这个属性 transform-origin: 0 0 或 -moz-transform-origin: 0 0 来修复它！

【参考方案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

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

complete styles for cross browser CSS zoom

【讨论】：

转型和规模化是现代方法 :)