object-fit控制图片填充需满足三点：容器设固定宽高、图片设width/height:100%并block显示、选对cover/contain值及object-position微调；需兼顾兼容性与降级方案。
用 object-fit 控制图片填充，核心就三点：容器有明确尺寸、图片铺满容器、属性值选对。它不是“写了就生效”的属性，必须搭配结构和样式一起工作。
容器必须设固定宽高
这是前提，没它 object-fit 就没参照系。不能只写 width: 100% 却漏掉 height，也不能用 min-height 或 aspect-ratio（旧版 Safari 不认）替代。
- 推荐写法：
div.img-container { width: 300px; height: 200px; overflow: hidden; } - Flex/Grid 布局中，如果容器是 flex item，要加
flex-shrink: 0或直接写死宽高 - 避免父级塌陷：比如外层
div没高度，内部img再怎么设也白搭
图片要占满容器空间
object-fit 只在图片实际尺寸和容器匹配时起作用。所以得让 <img> 自己撑开容器。
- 给
img设width: 100%; height: 100%; display: block; - 别用行内
width和height属性，会干扰 CSS 控制 - 确保容器不是
inline元素，默认不认height，需显式设display: block或inline-block
选对 object-fit 值并微调裁剪位置
常用两个值，逻辑相反，别混用：
-
cover：等比缩放，短边填满容器 → 长边溢出被裁，适合头图、卡片图 -
contain：等比缩放，长边贴住容器 → 短边留白，适合证件照、产品主图 - 人脸常偏上？加
object-position: center top或object-position: 50% 20%往上提 -
object-position单位是图片自身尺寸，50% 20%表示垂直方向向上偏移图片高度的 20%
兼容性与降级处理
IE 完全不支持，iOS Safari 12.2 前有 bug，关键图不能只靠它。
- 基础降级：
img { width: 100%; height: auto; }至少保比例不拉伸 - 语义要求高（如 SEO、屏幕阅读器）→ 用
<img>+object-fit+ fallback 样式 - 纯装饰图 → 改用
background-image+background-size: cover，更灵活但无 alt 文本 - 需要 polyfill 时注意加载时机，别等图片都渲染完了才注入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
