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

Question

转换后容器的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 ???

- user420479

---

如果两个比例因子相同，您只需要指定一个。 - user663031

Answer 1

Transforms不会影响元素的布局(或者更准确地说是盒模型)，它们纯粹是外观上的变化。根据规范:

注意：转换确实会影响画布上的视觉布局，但对CSS布局本身没有影响。这也意味着转换不会影响Element Interface Extensions中getClientRects()和getBoundingClientRect()的结果，这些在[CSSOM-VIEW]中进行了指定。

- BoltClock

---

提示！精确！易懂！（也就是说，“难怪我得到了这样的结果”。）现在，如果我能解决这个困境 = http://jsfiddle.net/johnlove/yL2td3r2/ - user420479

Answer 2

我已经解决了使用 ::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;
    }

- ADOLFO MARTIN GONZALEZ