使用 CSS 缩放整个 HTML 元素

Question

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

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

Answer 1

1.您可以使用 CSS3 二维变换：

    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);
    }