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

使用 CSS 调整大小时保留图像比例：综合指南

在 Web 开发领域，通常需要调整图像大小以适应各种显示要求。然而，保持图像的纵横比以避免不必要的拉伸或扭曲至关重要。为了实现这一点，CSS 提供了一个优雅的解决方案。

对象适合：保持比例的关键

对象适合属性控制如何替换元素的内容，例如图像或视频，应调整大小以适合其容器。通过利用此属性，我们可以指定如何在保留图像原始宽高比的同时调整图像大小。

填充元素时保留比例

用以下内容填充元素在保持比例的情况下，使用对象适合属性的“cover”值。这告诉浏览器调整图像大小以完全填充元素，同时裁剪边缘多余的内容以确保保持宽高比。

例如：

.cover {
  object-fit: cover;
  width: 150px;
  height: 100px;
}

<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/2OrtT.jpg" class="lazy" alt="如何在使用 CSS 调整大小时保持图像纵横比？" >

代码演示

在上面的例子中，cover类使用了object-fit: cover属性来确保图像会缩放以填充宽度为 150 像素、高度为 100 像素的元素。尽管图像的原始尺寸（宽度为 242 像素，高度为 363 像素），但它会被缩放和裁剪以将其纵横比保持在指定的元素大小内。

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