CSS 转换：缩放未按预期工作

Question

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

问题是图像边界框的高度和宽度不随图像缩放。我从另一个 post 得到这张图片 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>

CSS 转换：缩放未按预期工作

CSS transform: scale not working as wanted

html

css

image

transform

scale