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>

CSS转换：缩放无法按需工作

1 个答案: