如何使用 CSS 调整图像大小，同时保持纵横比？

在保持宽高比的同时强制调整图像大小

处理图像时，通常需要将图像大小调整为特定尺寸。但是，保留纵横比可确保图像不会出现扭曲或拉伸。

初始尝试：

最初，使用指定的尺寸和自定义 CSS 规则来调整大小图像，但纵横比不是维护：

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

img {
  max-width: 500px;
}

解决方案：

要在保持宽高比的同时强制调整图像大小，可以使用以下 CSS 属性：

• display: block;: 确保图像可以在页面内流动content.
• max-width:230px;: 设置图像的最大宽度。
• max-height:95px;: 设置图像的最大高度。
• width: auto;：允许图像自动填充最大宽度和最大高度约束内的可用空间。
• 高度： auto;：根据图像固有的宽高比自动调整高度。

结果：

将这些 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 调整图像大小，同时保持纵横比？" >

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

生成的图像在指定的最大尺寸内调整大小，同时保持其原始外观比例。

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