CSS 转换：缩放无法按预期工作

Question

我想在我用变换缩放的图像正下方放置文本：scale(0.50, 0.50);

问题是图像边界框的高度和宽度不随图像缩放。我从另一个帖子中得到了这张图片example of scaled image，但这不是我要找的答案。如何使较大的预缩放图像的边框与较小的新图像比例匹配？我的代码如下：

.content #imagediv {  
    background-color: blue;  
}  
.content #imagediv img {  
    transform: scale(0.50, 0.50);  
    transform-origin: top left;  
    display: inline-block;  
}

这看起来像this

Answer 1

我认为您必须使用另一种方法更改图像大小。我不认为transfrom: scale 在这种情况下会起作用。为什么不只是设置图像宽度并让高度是动态的？此时文本将位于图像的正下方。如果需要50%，也可以用js把图片的宽度改成原来的50%。

var img = document.getElementById('image'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
img.style.width = (width / 2) + 'px';

.content #imagediv {  
    background-color: blue;
    line-height:0; //used to get rid of extra space after the image.
}  
.content #imagediv img {  
    width:400px; //changes to 200px with js. Even if this is not set it will still get set to 200px because the js is calulating based off the image size.
}

<div class="content">
    <div id="imagediv">
        <img id="image" src="https://via.placeholder.com/400x400" />
    </div>
    <span>Random Text I want right below the image</span>
</div>