为什么以百分比表示的图像宽度也会影响图像高度？

Question

大家好，我正在尝试通过使用百分比而不是像素来使网站的响应速度更快。 当我将图像宽度更改为百分比时，我注意到它也影响了高度。 有人可以向我解释为什么吗？

提前致谢！

Answer 1

很简单，图像总是试图保持比例。 因此，如果更改宽度或高度，则另一个将随之更改。

这是图像的纯净本性，因为否则，如果错误地调整尺寸，它们将看起来模糊。

Answer 2

CSS更改图像的宽度时，如果将高度设置为auto （初始值），则CSS也会缩放图像的高度。

这样可以更轻松地将固定大小的横幅广告放置在您的网站上，而无需知道其大小，但仍不会破坏其比例，因为如果图像中包含文本或正方形，则如果仅将其调整为一个大小，则可能会显得很奇怪方向。

如果只想水平缩放，则必须指定高度。