CSS object-fit 属性用法

问题

如何控制 <img> 或 <video> 等可替换元素的内容在容器中的适应方式？

解答

object-fit 属性用于指定可替换元素的内容如何适应容器的宽高。

语法

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

/* 全局值 */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

属性值说明

contain

保持宽高比缩放内容，完整显示在容器内。如果宽高比不匹配，会出现留白（“黑边”）。

cover

保持宽高比缩放内容，填满整个容器。如果宽高比不匹配，内容会被裁剪。

fill

拉伸内容以填满容器，不保持宽高比。

none

保持内容原始尺寸，不进行缩放。

scale-down

在 none 和 contain 中选择一个，使用能得到更小尺寸的那个。

配合使用

可以通过 object-position 属性调整内容在容器内的对齐位置。

img {
  object-fit: cover;
  object-position: center top;
}

关键点

• object-fit 只对可替换元素（如 <img>、<video>）生效
• contain 完整显示内容但可能有留白，cover 填满容器但可能裁剪
• fill 会拉伸变形，none 保持原始尺寸
• 配合 object-position 可以控制内容的对齐方式