图像缩放后如何确定父元素的大小？

Question

早上好， 我正在尝试在网站上将图片缩放为较小的尺寸，但是它们占用的空间与原始图片相同。

div {position: absolute; background: green; width: auto; height: auto;}
img {-moz-transform:scale(0.5); -webkit-transform:scale(0.5); transform: scale(0.5); transform-origin: 0 0; }

<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Black_hole_-_Messier_87_%28cropped%29.jpg/1200px-Black_hole_-_Messier_87_%28cropped%29.jpg" alt="Black hole - Messier 87 (cropped).jpg">
</div>

您可以在其中看到它： https://jsfiddle.net/m6h42zba/

谢谢您的帮助。

Answer 1

CSS：

span {display: inline-block;}
img {width: 75%;}

HTML：

<span>
    <img src="example.png"/>
</span>

简单的解决方案