Resize img content with css

Question

I have img tag set with css:

.bakery-item > img {
    content: url('img/art-of-cakes-sprites.png');
    object-fit: none;
}

how can I then resize image just like I would with background-size property?

.bakery-item > img {
    width: 50%;
    /* resize image by 50% */
}

Image is a sprite so I dont want to use cover-like solution. I tried using transform: scale(.5); on element but this doesn't make element shrink in DOM (it still takes the same space).

I couldn't find anwser over the internet.

Answer 1

This code sets the transform origin to the top left corner and scales to half size.

.bakery-item > img {
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
}