用css调整img内容的大小

Question

我使用css设置了img标记：

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

我怎样才能像调用background-size属性一样调整图像大小？

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

Image是一个精灵，所以我不想使用cover - 就像解决方案一样。我尝试在元素上使用transform: scale(.5);，但这并没有使DOM中的元素缩小（它仍然占用相同的空间）。

我无法通过互联网找到答案。

Answer 1

此代码将变换原点设置为左上角并缩放为一半大小。

https://jsfiddle.net/cs6jdfso/