object-fit必须配合显式宽高才生效，否则无效；cover等比缩放至短边填满而裁长边，contain等比缩放至长边贴边而留白；需用object-position微调焦点，且注意IE不支持。
object-fit能直接解决图片在固定尺寸容器里拉伸变形、裁剪错位、留白难控的问题，但必须配合显式宽高才生效，否则它什么也不做。
为什么设置了 object-fit 却没效果
最常见原因是图片或其父容器没设明确的 width 和 height。浏览器不知道“填满谁”，object-fit 就不会触发。
-
img元素本身必须有可计算的尺寸，比如width: 100%; height: 100%或具体像素值 - 父容器不能仅靠内容撑开，得有
height: 300px、aspect-ratio: 16/9或min-height等约束 - 别忘了加
overflow: hidden，否则cover裁剪的部分可能溢出可见区域
object-fit: cover 和 object-fit: contain 的实际区别
两者都保持原始宽高比，但处理逻辑相反：
-
cover：等比缩放直到**短边刚好填满容器**，长边超出部分被裁掉；适合头像、轮播图、封面图 -
contain：等比缩放直到**长边刚好贴住容器边界**，短边留白；适合产品图、文档截图、需要完整信息的场景 - 如果容器是圆角或圆形（如
border-radius: 50%），cover更可靠，contain容易在边缘露出背景色
如何微调裁剪焦点位置
object-fit: cover 默认居中裁剪，但人脸常偏上——这时候要用 object-position 手动偏移。
- 值写法类似
background-position：object-position: center top、object-position: 50% 20%、object-position: center 10% - 数值单位支持像素、百分比、关键词；百分比以图片自身为基准，不是容器
- 搭配圆形头像容器时，
object-position: center 10%往上提一点，能让人脸更居中显示
兼容性和 fallback 方案
object-fit 在 IE 中完全不支持，iOS Safari 12.2 之前存在渲染 bug（裁剪错位、闪烁），不能只靠它兜底。
- 现代项目可加
@supports (object-fit: cover)做渐进增强 - 需兼容旧版 Safari 时，用
background-image+background-size: cover替代，但会牺牲img的语义和 SEO - 服务端无法改结构时，JS 检测支持性并动态替换为背景图方案也是一种选择，不过多数场景没必要
真正容易被忽略的是：当容器使用 flex 或 grid 布局时，子元素 img 的尺寸继承可能被干扰，此时加一句 align-self: stretch 或 min-width: 0; min-height: 0 才能让 width: 100%; height: 100% 正常生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
