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

【问题标题】：How to fix parent element size after image scaling?如何在图像缩放后修复父元素大小？
【发布时间】：2019-04-12 10:27:58
【问题描述】：

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

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/

感谢您的帮助。

【问题讨论】：

你可以只使用宽度和高度。
这就是 scale 的作用……它完全是一种视觉效果。它不会影响实际大小或布局。
那么我应该使用哪个命令？

标签： html css image transform scale

【解决方案1】：

CSS：

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

HTML：

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

简单的解决方案

【讨论】：