用object-fit填充图片必须同时满足容器有明确宽高且img设width:100%和height:100%，否则完全不生效；常见失效源于容器高度未约束、行内默认对齐或缺少overflow:hidden。
直接说结论：用 object-fit 填充图片，必须同时满足两个硬性条件：容器有明确宽高（不能靠内容撑开），且 img 元素本身设置了 width: 100% 和 height: 100%；否则 object-fit 完全不生效。
为什么 object-fit 没反应？——常见失效场景
最常遇到的“写了没用”，根本不是属性写错，而是 DOM 结构或样式链断了：
- 父容器只设了
width没设height，或者用了min-height、max-height等非确定值 -
img外层用了display: inline（默认）或flex未设align-items: stretch，导致高度未继承 - 图片加载前容器高度为 0，JS 动态插入后未触发重绘（尤其在 SSR 或框架中）
- 容器加了
padding或border，但没配box-sizing: border-box，实际内容区变小
object-fit: cover 和 object-fit: contain 怎么选？
二者语义和视觉效果差异极大，选错会导致关键内容被裁掉或大面积留白：
-
cover：等比缩放 → 裁剪 → 填满。适用于头像、轮播图、卡片封面等“视觉优先”场景；焦点区域可用object-position: center 20%往上微调，避免人脸被切掉 -
contain：等比缩放 → 不裁剪 → 完整显示。适用于产品图、说明书插图、图表等“信息完整优先”场景；但容器宽高比与图片不一致时，必然出现上下或左右留白 - 别用
fill：强制拉伸变形，现代项目中基本等于放弃可访问性和设计一致性
圆形容器里塞头像，object-fit 必须配什么？
圆角 + 裁剪是高频需求，但只写 border-radius: 50% 不够，容易漏掉关键控制点：
立即学习“前端免费学习笔记（深入）”；
- 容器必须显式设置
width和height（如120px），不能依赖aspect-ratio（旧版 Safari 不支持） - 务必加
overflow: hidden，否则cover裁剪后边缘会溢出圆角 -
img需要display: block，避免行内元素默认的基线对齐造成底部空隙 - 想让人脸居中更稳？补一句
object-position: center top或具体偏移值，比如object-position: 50% 30%
兼容性差怎么办？IE 和老 iOS Safari 的兜底方案
IE 完全不支持 object-fit；iOS Safari 8–9 对 object-position 有渲染 bug；不能只靠 CSS：
- 服务端生成统一比例缩略图（如全部转成 1:1），从源头规避裁剪问题
- 用
background-image替代img标签：容器设background-size: cover+background-position: center，兼容性好，但牺牲 SEO 和 alt 文本 - 轻量 JS 检测：
if ('objectFit' in document.documentElement.style) { /* 用 CSS */ } else { /* 插入 background div 或调整 class */ }
最容易被忽略的是：所有这些方案都依赖容器尺寸的确定性。哪怕只漏掉一行 height: 100% 或一个 overflow: hidden，object-fit 就会静默失效——它不像 color 那样报错，而是直接回退到原始行为。
