CSS transform: scale does not change DOM size?

Question

Container's DOM width after transform is the same as before transform?

Why?

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

Transforms don't affect the layout — or more precisely the box model — of an element. They are purely cosmetic. From the 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

I have solved the problem with ::before.

The tag has the right size and I scale the image in the ::before layer.

    *, *::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;
    }