object-fit 是控制替换元素内容缩放与裁剪的 CSS 属性，需配合 width/height 或 aspect-ratio 使用；fill 变形填充，contain 等比留白，cover 等比裁剪，scale-down 智能缩放。
object-fit 是什么，为什么不用 width/height 百分比
object-fit 用于控制 等替换元素在其容器内的缩放与裁剪行为。它不改变元素本身尺寸，只影响内容如何“装入”已设定的宽高框内。单纯用 width: 100%; height: 100% 会强行拉伸图片、破坏宽高比，而 object-fit 在保持容器尺寸固定的前提下，提供更可控的适配策略。
常用值对比：fill / contain / cover / scale-down
不同值对应不同场景，选错会导致意外裁剪或留白：
-
fill：完全填满容器，**无视原始宽高比**，必变形 -
contain：等比缩放，确保全部内容可见，**可能留白**（常见于头像预览、图标容器） -
cover：等比缩放并**填满容器，超出部分裁剪**（最常用，如 banner 图、卡片封面） -
scale-down：在none和contain中取更小尺寸效果，仅当原图比容器大时才缩放
必须配合 width/height 或 aspect-ratio 才生效
object-fit 不会自动让容器有尺寸；如果父容器没设宽高，img 仍按原始尺寸渲染，object-fit 就无从谈起。常见写法：
.card-img {
width: 100%;
height: 200px; /* 必须指定高度，否则 cover/contain 无效 */
object-fit: cover;
}
现代方案可搭配 aspect-ratio 避免固定像素高度：
.responsive-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
IE 不支持，需要 fallback 时注意 img 的默认行为
IE 完全不识别 object-fit，会回退到原生 img 渲染逻辑（即按 intrinsic size 显示）。若需兼容 IE：
- 不要依赖
object-fit: cover实现裁剪效果，改用背景图 +background-size: cover - 若坚持用
- 注意：Safari 旧版本（≤ iOS 9.3）对
object-fit支持不完整，scale-down可能失效
真正容易被忽略的是：即使写了 object-fit: cover，如果容器没有明确的块级尺寸上下文（比如 flex item 未设 min-width: 0 或被父级 overflow: hidden 干扰），实际渲染仍可能异常。先确认容器“真有尺寸”，再调 object-fit。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
