图像缩放后如何修复父元素大小？

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>

简单解决方案