使用 CSS 缩放整个 HTML 元素

【问题标题】：Scale an entire HTML element using CSS使用 CSS 缩放整个 HTML 元素
【发布时间】：2017-08-07 12:05:42
【问题描述】：

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

我有一个<table>，我正在使用 JavaScript 模拟一个象形文字来计算 div 的宽度 + 一个重复的背景标签。我想要这个逻辑的一个版本，所以缩放父表可以解决这个问题。

【问题讨论】：

大众是解决方案吗？ stackoverflow.com/a/42399907/384316
显示一些代码或你所拥有的演示。

标签： html css scale css-transforms scaletransform

【解决方案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);
    }

【讨论】：