object-fit 能解决图片变形、留黑边、裁错位问题，但需容器有可计算尺寸且图片设宽高100%，IE不支持，iOS Safari 12.2前有bug；cover裁剪填满，contain等比留白；需配合object-position微调焦点，并用background-image降级兼容。
直接给结论：object-fit 能解决图片在固定尺寸容器里变形、留黑边、裁错位的问题，但**不配显式宽高就等于没写**，IE 完全不认，iOS Safari 12.2 之前有渲染 bug。
为什么写了 object-fit 却完全没反应
不是属性写错了，是浏览器根本没触发它——object-fit 需要“参照物”，也就是可计算的容器尺寸和图片自身尺寸。
- 父容器只设了
width没设height，或用了min-height、aspect-ratio（旧版 Safari 不支持），object-fit就不会生效 -
img元素没设width: 100%和height: 100%，只写width: 100%+height: auto，它还是按原始比例渲染，cover或contain就没机会起作用 - 容器是
display: inline（默认）或 flex 容器里没设align-items: stretch，高度无法继承下来 - 忘了加
overflow: hidden，cover裁掉的部分会溢出，甚至撑开滚动条
object-fit: cover 和 object-fit: contain 怎么选
二者都保持原始宽高比，但缩放逻辑相反，选错会导致关键内容消失或大面积留白。
-
cover：等比缩放直到**短边刚好填满容器**，长边超出部分被裁剪；适合头像、轮播图、封面图这类“视觉优先”场景 -
contain：等比缩放直到**长边刚好贴住容器边界**，短边必然留白；适合产品图、证件照、图表等“信息完整优先”场景 - 圆形容器（如
border-radius: 50%）里用cover更稳妥，contain容易在边缘露出背景色 - 别用
fill：强制拉伸变形，现代项目中基本等于放弃可访问性和设计一致性
如何微调裁剪焦点位置（比如让人脸不被切掉）
object-fit: cover 默认居中裁剪，但人脸常偏上，这时必须靠 object-position 手动偏移。
立即学习“前端免费学习笔记（深入）”；
- 值写法类似
background-position：object-position: center top、object-position: 50% 20%、object-position: center 10% - 百分比单位以图片自身为基准，不是容器；
center 10%表示垂直方向向上偏移图片高度的 10% - 搭配圆形头像容器时，
object-position: center 10%往上提一点，能让人脸更靠近视觉中心 -
object-position必须和object-fit搭配才生效，单独写无效
兼容性与 fallback 方案怎么写
IE 完全不支持 object-fit，iOS Safari 12.2 之前存在裁剪错位、闪烁等 bug，不能只靠它兜底。
- 基础 fallback 是用
background-image替代：div设背景图 +background-size: cover，但失去语义和 SEO 可访问性 - 渐进增强写法：先写
background-image保底，再用@supports (object-fit: cover)覆盖为img+object-fit - 服务端渲染或框架中动态插入图片时，注意容器初始高度是否为 0，否则 JS 插入后可能不重绘，需手动触发
resize或强制reflow
最容易被忽略的是：容器的 box-sizing。如果容器加了 padding 或 border 却没设 box-sizing: border-box，实际内容区变小，width: 100%; height: 100% 的 img 就会撑不满，object-fit 自然失效。
