CSS中aspect-ratio与object-fit：仅用aspect-ratio:16/9还需object-fit吗？

首先明确：只用aspect-ratio:16/9不是必须搭配object-fit，两者作用完全不同，要不要搭配取决于你的需求和图片本身的比例。

两个属性的核心作用 #

• aspect-ratio:16/9：强制图片元素保持16:9的宽高比例，不管图片原始尺寸如何，元素的宽高会按这个比例计算。但它不控制图片内容的显示方式，默认情况下图片会被拉伸填充整个元素区域。
• object-fit：专门控制图片内容如何适配元素的宽高容器，解决的是图片比例和元素比例不匹配时的显示问题，常用值有：
  • cover：保持图片原始比例，裁剪多余部分填满容器，无变形
  • contain：保持图片原始比例，完整显示图片，容器剩余区域留空白
  • fill：默认值，拉伸图片填满容器，会导致变形

为什么文章里同时使用两者 #

如果你的图片原始比例不是16:9，只设置aspect-ratio会让图片被拉伸变形，视觉效果很差。这时候搭配object-fit: cover就能让图片保持原有比例，通过裁剪适配16:9的元素容器，既保证了容器比例，又避免图片变形，这是实际开发中很常用的组合。

不同场景的选择 #

1. 图片本身就是16:9：只用aspect-ratio:16/9就足够，图片会正常显示，不会变形。
2. 图片比例≠16:9，且想让图片填满容器无变形：必须搭配object-fit: cover。
3. 图片比例≠16:9，想完整显示图片：搭配object-fit: contain，容器会出现空白区域，但图片不会变形。

代码示例 #

• 仅用aspect-ratio（图片比例不符时会变形）：

img {
  width: 100%;
  aspect-ratio: 16/9;
}

• 搭配object-fit（保证图片不变形）：

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

内容的提问来源于stack exchange，提问作者Georgios