按百分比缩放 div 的内容？

构建各种类型的 CMS，用户可以在其中移动框来构建页面布局(无论如何，这是基本思想)。

我想把实际的内容从数据库和建立了“页面”，但有它显示在50% 的规模。

我意识到我可以有两套 CSS-一套用于实际的前端页面，一套用于管理工具，并相应地缩小所有内容，但是维护起来似乎很痛苦。

我希望可以使用某种 jquery 或 CSS 或者其他方法来填充 div 并赋予它属性(?)50% 的比例。

139668 次浏览
小开
最佳答案

You can simply use the zoom property:

#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.

小开

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

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.

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


提交答案