CSS 变换：缩放不会改变 DOM 大小？答案

【问题标题】：CSS transform: scale does not change DOM size?CSS 变换：缩放不会改变 DOM 大小？
【发布时间】：2015-12-26 09:54:02
【问题描述】：

容器变换后的DOM宽度和变换前一样吗？

为什么？

var theScale = aNumber;
var containerWidth = theContainer.width();
alert(containerWidth);

// and the other prefixes, as well
theContainer.css("-webkit-transform", "scale(" + theScale + ")");

containerWidth = theContainer.width();
alert(containerWidth);   // the same value ???

【问题讨论】：

如果两个比例因子相同，只需指定一个即可。

标签： css css-transforms

【解决方案1】：

我已经用 ::before 解决了这个问题。

标签大小合适，我在 ::before 层中缩放图像。

    *, *::before {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .card {
        width: calc(1178px / 2);
        height: calc(1280px / 2);
        position: relative;
        border: solid 5px blue;
    }
    
    .card::before {
        content: "";
        position: absolute;
        border: solid 5px red;
        width: calc(100%);
        height: calc(100%);
        background-image: url(./seasons-of-the-year.png);
        transform: scale(0.5);
        transform-origin: left top;
    }

【讨论】：

【解决方案2】：

变换不会影响元素的布局——或者更准确地说是盒子模型——。它们纯粹是化妆品。来自spec：

注意：转换确实会影响画布上的视觉布局，但不会影响 CSS 布局本身。这也意味着转换不会影响 [CSSOM-VIEW] 中指定的元素接口扩展 getClientRects() 和 getBoundingClientRect() 的结果。

【讨论】：

提示！精确的！并且可以理解！（又名，“难怪我得到了我的结果”）。现在，如果我能弄清楚这个困境 = jsfiddle.net/johnlove/yL2td3r2