jQuery 按百分比缩放 div 的内容？

Scale the contents of a div by a percentage?

提问by Dave

Building a CMS of sorts where the user can move around boxes to build a page layout (basic idea anyway).

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

I'd like to pull the actual contents in from the database and build out the "page", but have it display at 50% scale.

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

I realize I could have 2 sets of CSS - one for the actual front-facing page, and one for the admin tool and just shrink everything accordingly, but that seems like a pain to maintain.

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

I was hoping there might be some kind of jquery or CSS or something that would allow me to populate a div and give it the properties (?) of 50% scale.

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

回答by Benjamin Gruenbaum

You can simply use the zoomproperty:

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

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

Where myContainer contains all the elements you're editing. This is supported in all major browsers.

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

回答by Chris Moschini

This cross-browser lib seems safer - just zoom and moz-transform won't cover as many browsers as jquery.transform2d's scale().

这个跨浏览器的库看起来更安全——只是缩放和 moz-transform 不会像 jquery.transform2d 的 scale() 那样覆盖尽可能多的浏览器。

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

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

For example

例如

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

Update

更新

OK - I see people are voting this down without an explanation. The other answer here won't work in old Safari (people running Tiger), and it won't work consistently in some older browsers - that is, it does scale things but it does so in a way that's either very pixellated or shifts the position of the element in a way that doesn't match other browsers.

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

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

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

Or just look at this question, which this one is likely just a dupe of:

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

complete styles for cross browser CSS zoom

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