使用CSS缩放整个HTML元素

Question

如何按特定百分比或特定最终尺寸缩放整个元素和所有子元素？

我有<table>，我正在使用JavaScript模拟象形图来计算div的宽度+重复的背景标记。我想只有这个逻辑的一个版本，因此缩放父表将解决这个问题。

Answer 1

<强> 1。您可以使用CSS3 2D变换：

    div {
        -ms-transform: scale(0.5, 0.5); /* IE 9 */
        -webkit-transform: scale(0.5, 0.5); /* Safari */
        transform: scale(0.5, 0.5);
    }

你只需要将它应用于父元素。

<强> 2。您可以使用zoom，但它有两个缺点：

• 如果您使用定位
，它不是一个交叉浏览器解决方案
• 它不适用于Firefox

示例：

    div {
    zoom: 50%;
    -moz-transform: scale(0.5);
    }