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 ???

Answer 1

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

Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].

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

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

CSS transform: scale does not change DOM size?

css

css-transforms