object-fit 生效需同时满足三要素：容器或图片有可计算尺寸、图片设 width:100% 和 height:100%、加 display:block 且父容器 overflow:hidden；否则会失效或拉伸变形。
只写 object-fit: cover 或 object-fit: contain 不会生效——浏览器根本不知道“盒子多大”，自然没法缩放或裁剪。
为什么写了 object-fit 还是拉伸变形？
不是属性写错，而是没给浏览器一个可测量的容器。object-fit 不是自适应开关，它是“图怎么放进已知尺寸盒子里”的指令。盒子不存在，它就静默失效。
-
img只设了width: 100%，但height是auto或未声明 → 容器高度由图片原始尺寸撑开，无法约束缩放 - 父容器是
display: flex，子项没设height: 100%或min-height→ 加载中高度塌陷为 0 - 用了 Bootstrap 的
img-fluid类 → 它带height: auto，和object-fit: cover冲突 - 没加
display: block→img默认是 inline 元素，基线留白干扰实际高度计算
必须配齐的三要素，缺一不可
只有这三项同时满足，object-fit 才真正起作用：
- 容器或
img自身要有可计算尺寸：width: 100%+aspect-ratio: 16 / 9（推荐）或height: 200px（固定值） -
img必须设width: 100%和height: 100%（不能只靠父容器撑高） - 加
display: block消除行内间隙；父容器加overflow: hidden（尤其用cover时，否则裁剪部分会溢出）
cover 和 contain 到底怎么选？
这不是“哪个好看”，而是内容语义决定的：这张图里，哪部分绝对不能丢？
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后填满、裁剪边缘 → 适合轮播封面、卡片图、头像。但默认object-position: center center可能切掉人脸，必须配object-position: center top或具体偏移值 -
object-fit: contain：等比缩放后完整居中显示、留白补足 → 适合证件照、UI 图标、技术配图。此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: fill：强制拉伸，和不写object-fit效果一致 → 一律避免
iOS Safari 和旧 WebView 怎么兜底？
iOS Safari ≤13.3 完全不支持 object-fit 在 img 上生效，加 -webkit-object-fit 也无效，会退化为 fill（即拉伸）。安卓部分低端 WebView 压根不认这个属性。
- 用
@supports (object-fit: cover)包裹现代写法，再给不支持环境写降级规则 - 更稳妥的 fallback：改用
background-image+background-size: cover，但会丢失alt、SEO 和原生懒加载 - 真机测试别只看竖屏：横屏下容器宽高比突变，
cover可能让一张 400×300 的图缩成图标大小，得用媒体查询兜底，比如@media (orientation: landscape) { ... }
最常被忽略的，是容器高度是否真的生效——哪怕写了 height: 200px，也可能被 flex 或 grid 的隐式行为覆盖掉。真机上打开 DevTools，直接检查 img 的 computed height，不是看 CSS 规则，而是看实际渲染值。
