按百分比缩放div的内容？

Question

构建各种类型的CMS,用户可以在框中移动以构建页面布局(无论如何都是基本的想法).

我想从数据库中提取实际内容并构建"页面",但是它以50%的比例显示.

我意识到我可以拥有2套CSS - 一套用于实际的前置页面,一套用于管理工具,只是相应地收缩一切,但这似乎很难维护.

我希望可能有某种jquery或CSS或者什么东西可以让我填充div并给它50%规模的属性(？).

Answer 1

您只需使用zoom属性:

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

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

出于好奇,如果所有主流浏览器都支持`zoom`,为什么`-moz-transform:scale(0.5);`required？或者,是否需要涵盖所有浏览器的语句？ (6认同)
@rinogo根据[我可以使用](http://caniuse.com/#feat=css-zoom)没有当前版本的Firefox支持`zoom`,所以我认为这就是包含`-moz-transform`的原因. (3认同)
@BenjaminGruenbaum http://stackoverflow.com/questions/26488960/zoom-vs-scale-in-css3 (3认同)
这节省了我很多时间！ (2认同)
如果在Firefox上效果不佳（即未正确对齐），请添加此属性`transform-origin：0 0`或`-moz-transform-origin：0 0`进行修复！ (2认同)

Answer 2

这个跨浏览器的lib看起来更安全 - 只是缩放和moz-transform不会覆盖jquery.transform2d的scale()那么多的浏览器.

例如

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

更新

好的 - 我看到人们在没有解释的情况下投票.这里的另一个答案在旧的Safari(运行Tiger的人)中不起作用,并且它在一些旧的浏览器中不能一致地工作 - 也就是说,它确实可以扩展,但它以非常像素化或移动的方式实现元素的位置与其他浏览器不匹配.

或者只看这个问题,这可能只是一个骗局: