用 aspect-ratio 与 object-fit，让图片适配不再是难题

在 web 开发中，我们经常需要处理图片的适配问题，例如如何让图片在父元素中以特定的方式显示。本文将介绍两种强大的 CSS 属性：aspect-ratio 和 object-fit，它们可以帮助我们轻松解决图片适配难题。

aspect-ratio：定义图片的长宽比

aspect-ratio 属性用于定义图片的长宽比。它接受一个由两个数字组成的值，表示图片的宽度和高度之间的比率。例如：

aspect-ratio: 16 / 9;

以上代码将强制图片以 16:9 的长宽比显示。这意味着图片的宽度将始终是高度的 1.78 倍。

object-fit：控制图片在父元素中的缩放方式

object-fit 属性控制图片在父元素中的缩放方式。它接受以下值：

• contain： 缩放图片以完全显示在父元素中，同时保持图片的原始长宽比。
• cover： 缩放图片以完全填满父元素，可能会裁剪图片的部分内容。
• fill： 缩放图片以完全填满父元素，并拉伸图片以适应父元素的形状。
• none： 不缩放图片，而是按原样显示。
• scale-down： 仅在图片尺寸大于父元素尺寸时缩放图片。

aspect-ratio 与 object-fit 的妙用

将 aspect-ratio 和 object-fit 结合使用，我们可以实现各种图片适配效果。例如：

• 保持图片的长宽比，并在父元素中居中显示：

aspect-ratio: 16 / 9;
object-fit: contain;

• 填满父元素，并在父元素中居中显示：

aspect-ratio: 16 / 9;
object-fit: cover;

• 拉伸图片以完全填满父元素，并在父元素中居中显示：

object-fit: fill;

• 仅在图片尺寸大于父元素尺寸时缩放图片，并按原样显示：

object-fit: scale-down;

实践中的应用

示例 1：响应式图片画廊

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.gallery img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

上面的代码创建了一个响应式的图片画廊，其中图片会根据父元素的尺寸自动调整大小，并始终保持 16:9 的长宽比。

示例 2：英雄横幅

<div class="hero-banner">
  <img src="hero-image.jpg" alt="Hero Image">
</div>

.hero-banner img {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

上面的代码创建了一个全屏英雄横幅，其中图片会自动调整大小以填满浏览器窗口，同时裁剪掉多余的部分。

总结

aspect-ratio 和 object-fit 是两个强大的 CSS 属性，可以帮助我们轻松解决图片适配问题。通过了解这些属性的工作原理，我们可以创建出适应性强、美观的图像布局。希望本文能帮助您提升图片适配技能，让您的 web 应用程序更加赏心悦目。