如何在保持宽高比的同时调整 HTML 中的图像大小？

在调整图像大小期间保留纵横比

处理图像时，保持其纵横比以确保它们正确显示至关重要。但是，在 HTML 中指定宽度和高度属性通常会导致扭曲。

请考虑以下 HTML 代码：

<img src="/static/imghwm/default1.png" data-src="big_image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="">

要在保留图像宽高比的同时调整图像大小，请应用以下 CSS规则：

img {
    display: block;
    max-width: 500px;
}

显示：块；属性确保图像的行为类似于块元素，允许它填充其容器的宽度。 max-width 属性设置图像的最大宽度，确保图像不会超过该宽度，同时保留其高度。

此 CSS 也适用于以下 HTML：

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="如何在保持宽高比的同时调整 HTML 中的图像大小？" >

使用这种方法，不同尺寸的图像将按比例调整大小，保留其纵横比，同时遵守指定的最大宽度。

以上是如何在保持宽高比的同时调整 HTML 中的图像大小？的详细内容。更多信息请关注PHP中文网其他相关文章！