CSS object-fit 控制替换元素的尺寸适配

如果没有 object-fit，图片默认的行为是填满元素的宽高，同时保持自身的长宽比。这意味着图片会被等比例缩放，直到宽度或高度达到 300px，而另一个方向可能无法填满整个 300px 空间，于是会出现留白（默认背景为透明，实际显示时可能看到容器背景）。这通常不是我们想要的结果——我们可能希望图片裁剪、拉伸或完全包含在盒子中。

object-fit 属性允许我们像处理 CSS 背景图片的 background-size 一样，精确控制替换元素内部内容在盒子内的填充方式。

object-fit 属性值详解

object-fit 有以下五个值，分别对应不同的适配行为：

注意：object-fit 需要配合容器元素的明确宽度和高度才能有效工作。如果替换元素本身没有设置尺寸或只设置了 auto，object-fit 可能无效。

实战演示

我们以一张 800×500 的图片为例，设置容器为 300×200 的盒子。来看不同值的效果。

基础 HTML：

<div class="container">
  <img src="sample.jpg" class="fit-fill" />
</div>

基础 CSS：

.container {
  width: 300px;
  height: 200px;
  border: 2px dashed #aaa; /* 辅助观察容器边界 */
  margin: 10px;
  display: inline-block;
}
img {
  width: 100%;
  height: 100%;
}

然后为每种 object-fit 添加对应的 class：

.fit-fill    { object-fit: fill; }
.fit-contain { object-fit: contain; }
.fit-cover   { object-fit: cover; }
.fit-none    { object-fit: none; }
.fit-scaledown { object-fit: scale-down; }

各模式视觉效果说明：

• fill：图片被拉伸变成 300×200，完全填充，但长宽比 800:500 = 8:5 被破坏，图像变形。
• contain：按比例缩放，使图片完全显示。宽高比 8:5，在 300×200 容器里，高度限制更大（200px 对应 500 原高），缩放后宽度变为 320px（500/200*800），超过容器宽度，所以实际会按宽度 300 缩放，高度变成 187.5px。图片完整显示，上下出现约 12.5px 的空白（边界内）。
• cover：缩放以覆盖容器。按 8:5 计算，要覆盖 300×200，需要宽度为 300，则高度需 187.5，不够 200，所以需要增加高度到 200，对应宽度会变成 320px。因此图片宽度 320px 多出 20px，会被水平居中裁切（默认裁剪位置由 object-position 控制）。
• none：图片以原始 800×500 尺寸放入 300×200 容器，大部分内容被裁切，只显示左上角一小片区域。
• scale-down：原始尺寸大于容器，所以选择 contain，结果同 contain。

你可以在自己的编辑器中复制以上代码并替换图片路径进行测试。

调整裁剪对齐：object-position

当使用 object-fit 导致内容被裁切或出现空白时，我们常常需要调整内容在容器内的对齐位置。这就是 object-position 的作用。

语法与 background-position 非常相似，可以接受关键词、百分比或精确像素值。

img {
  object-fit: cover;
  object-position: top left;   /* 裁剪时显示左上角 */
  /* 或者 */
  object-position: 80% 20%;   /* 水平 80% 处，垂直 20% 处 */
  /* 或者 */
  object-position: 50px 100px;
}

默认值是 50% 50%（居中）。

在人物照片等场景中，使用 object-position 可以确保即使通过 cover 裁剪，仍保持面部等关键部分可见。

浏览器兼容性与注意事项

• object-fit 和 object-position 在 IE 浏览器中不支持。对于需要兼容 IE 的场景，可以借助 polyfill 或用背景图片替代。
• 所有现代浏览器（Chrome、Firefox、Safari、Edge）均完美支持。
• 该属性不仅适用于 <img>，也适用于 <video>、<iframe> 等替换元素。例如，使用 object-fit: cover 让 <video> 全屏覆盖容器并保持比例，非常适合视频背景效果。
• 注意 CSS 的 max-width: 100% 和 height: auto 之类的响应式规则可能会与 object-fit 产生冲突。当设置了 width: 100% 和 max-width: 100% 时，容器高度可能变为 0，导致 object-fit 看起来无效。请务必给容器明确的高度（如固定像素、相对父元素的百分比，或者使用 aspect-ratio 属性）。

典型应用场景

1. 头像 / 缩略图网格
   使用 object-fit: cover 将不同尺寸的用户头像整齐地显示在同一大小的方框中，无需担心图片变形。

2. 产品列表图片
   商品主图原始比例各不相同，用 cover 或 contain 保持视觉一致性。

3. 视频背景
   <video autoplay muted loop> 配合 object-fit: cover 轻松实现全屏背景视频，同时保持比例。

4. 图片画廊中的自适应
   结合 CSS Grid 和 object-fit，创建整齐的图片墙。

动手练习：制作圆形头像

结合 border-radius 和 object-fit，可以轻松制作圆形头像，而不需要强制用户上传正方形图片。

<div class="avatar">
  <img src="user.jpg" alt="User Avatar">
</div>

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* 若想强调上半身，可向上偏移 */
}