object-fit生效的前提是容器有明确高度，否则无法计算缩放或裁剪；需通过aspect-ratio、padding技巧或固定height锁定渲染空间，再配合object-position控制cover裁剪方向。
只加 object-fit: cover 没用，必须先让容器有可测量的高度。
为什么 object-fit 加了却没反应？
浏览器根本不知道“往多大盒子里填”，object-fit 就无法计算缩放比例或裁剪边界。它不是独立生效的属性，而是依赖一个尺寸明确的渲染上下文。
-
img自身只设width: 100%，但没设height或aspect-ratio→ 容器高度由图片原始尺寸撑开，object-fit形同虚设 - 父容器用
display: flex或grid，但子项未设min-height或aspect-ratio→ 高度塌陷，尤其在内容为空或加载中时 - 用了
float且未清除 → 父容器高度为 0，img实际渲染在文档流外，尺寸失控 -
object-fit对background-image完全无效 —— 那得用background-size
怎么给容器“锁住高度”才靠谱？
关键是要让浏览器能确定图片的渲染空间。现代写法优先用 aspect-ratio，兼容性要求高时用传统 padding 技巧：
- 推荐（现代浏览器）：
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }—— 不依赖父容器高度，自身就能维持比例 - 兼容写法（含 Safari 13.3–）：父容器设
position: relative; padding-bottom: 56.25%;，img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 简单粗暴但有效：
img { width: 100%; height: 200px; object-fit: cover; }—— 固定像素高，适合卡片高度统一的场景
cover 和 contain 到底该选哪个？
这不是审美选择，而是语义和内容优先级的判断：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：适合封面图、头像、卡片缩略图——要求填满、无留白，允许裁剪。但默认居中裁剪可能切掉人脸或 Logo 关键区域 -
object-fit: contain：适合产品主图、图标、信息图——必须完整可见，留白可接受。此时object-position影响极小，因为整张图都在框内 -
object-fit: fill：会强制拉伸，破坏宽高比。除非刻意做故障艺术，否则一律避免 -
object-fit: scale-down：只在图片原始尺寸大于容器时退化为contain，否则用原始尺寸。适合不确定图源尺寸的组件库场景
cover 模式下怎么控制裁剪方向？
object-fit: cover 本身不指定裁哪边，它只保证等比缩放后居中填满。裁剪起始位置由 object-position 控制，默认是 50% 50%（居中）。你可以手动调整：
-
object-position: top center→ 顶部对齐，裁掉底部（适合 Banner 文字在下方） -
object-position: center bottom→ 底部对齐，裁掉顶部（适合人物偏上时保脸） -
object-position: left center→ 左侧对齐，裁掉右侧（如 Logo 靠左需保留） - 写法和
background-position一致，支持像素、百分比、关键词
最容易被忽略的是：没有显式尺寸约束的容器，object-fit 就是死代码；而即使有了尺寸，若未配 object-position，cover 下的关键内容仍可能被切掉 —— 这不是 bug，是规则生效的必然结果。
