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

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>

简单的解决方案