如何在使用 CSS 调整大小时保持图像长宽比？

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

图像纵横比对于在调整大小时保持图像的原始比例至关重要。当图像具有预定义的宽度和高度属性并应用其他 CSS 规则时，此问题变得明显。

例如，在下面提供的代码中，图像“big_image.jpg”的高度和宽度明确定义为 600和 900 像素，分别：

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

要在保持宽高比的同时强制调整图像大小，可以采用 CSS 规则。在这种情况下，可以使用以下 CSS 规则：

img {
    max-width: 500px;
}

但是，此 CSS 规则可能无法将图像缩小到适当的大小。为了解决这个问题，应该使用额外的 CSS 属性：

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

使用这些 CSS 属性，图像“big_image.jpg”将调整大小，同时保留其纵横比。这通过以下 HTML 和 CSS 代码进行说明：

<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="如何在使用 CSS 调整大小时保持图像长宽比？" >

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