如何在保持纵横比的同时强制调整 CSS 中的图像大小？

在强制调整图像大小时保留宽高比

在 Web 开发中处理图像时，保持原始宽高比至关重要，以防止失真。默认情况下，使用宽度和高度等 CSS 属性缩放图像可能会改变其宽高比。

解决问题

要解决此问题，可以采用 CSS 规则强制调整大小，同时保持纵横比。以下代码片段实现了此功能：

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

display: block;属性确保图像的行为类似于块元素，占据整个可用宽度。最大宽度：500px；设置图像的最大宽度，确保其不超过 500 像素。

至关重要的是，width: auto;和高度：自动；允许图像自动调整其尺寸，同时保持其纵横比。这意味着图像将调整大小以适合指定的最大宽度，而不会扭曲其高度或导致任何拉伸或挤压。

示例用法

考虑以下代码：

<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 规则应用于此图像将强制其在指定的最大宽度内调整大小，同时保留它的长宽比。

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