🎯 CSS 属性详解：object-fit 全解析

object-fit 是一个 CSS 属性，专门用于控制如 <img>、<video> 等替换元素的内容，如何在其容器中缩放和显示。

---

✅ 适用元素

• <img>
• <video>
• <picture>
• <canvas>（少见）
• <iframe>（极少）

⚠ 注意：不是所有 HTML 元素都能使用这个属性，它只适用于「替换元素」。

---

🧠 属性作用通俗解释

想象你在往画框里放一张照片，object-fit 就是控制你怎么摆这张照片的方式。

---

🖼️ 5 种常见取值（含类比）

属性值	说明	类比说明
fill	图片被拉伸/压缩，完全填满容器，可能会变形	把照片硬塞进画框，不管是否变形
contain	图片保持比例缩放，完整显示，容器可能出现留白	照片完整放进画框，宁可四周空着
cover	图片保持比例缩放至填满容器，可能部分被裁剪	裁掉照片边角，让画框被填满
none	图片不缩放、不裁剪，按原始大小显示	原样贴图，超出容器也无所谓
scale-down	介于 none 与 contain 之间，选尺寸较小的那个	如果图小就原样显示，太大会自动缩小以适配容器

---

📐 实例说明：cover 裁掉的是哪一边？

取决于图片比例 vs 容器比例：

• 图片太宽（横图）：裁掉左右
• 图片太高（竖图）：裁掉上下
• 哪边多裁哪边，让图片刚好铺满整个容器

---

🧩 scale-down 更深入理解

行为总结：

• 如果图片比容器小 → 显示原始大小（none 行为）
• 如果图片太大 → 缩小至容器大小（contain 行为）
• ✅ 永远不放大图片

实际上等于：min( none 尺寸, contain 尺寸 )

---

✅ 实际应用场景推荐

场景	推荐 object-fit 值
固定尺寸卡片中的图片	cover or contain
圆形头像裁剪	cover + border-radius
视频播放窗口适配	cover or contain
缩略图展示但不希望图片被放大	scale-down

---

🆚 和 background-size 的区别

对象	属性名	说明
替换元素	object-fit	控制 <img>、<video> 的显示
背景图片	background-size	控制背景图的缩放和铺法

虽然有 cover 和 contain 等相同的值，但应用场景和语法不同。

---

🧪 示例代码（常用搭配）

<div class="image-box">
  <img src="example.jpg" alt="示例图" />
</div>

<style>
.image-box {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 尝试修改为 contain / fill / none / scale-down */
}
</style>