只写object-fit: cover没用，因为它不是自动适配开关，而是需在已有宽高约束的容器内生效的布局指令；若容器高度为auto或无明确尺寸，浏览器无法计算缩放基准，该属性即静默失效。
为什么只写 object-fit: cover 没用？
因为 object-fit 不是“自动适配开关”，它是“在已有盒子里怎么摆图”的指令。如果 <img> 所在容器没有可计算的宽高（比如 height: auto 且父级也没设高），浏览器连“盒子多大”都算不出来，object-fit 就静默失效。
常见表现：
- DevTools 里
<img>实际高度为0或远小于预期 → 父容器塌陷 - Flex 容器中只写
width: 100%，没设min-height或aspect-ratio→ 子项被align-items: stretch拉高变形 - 用了
float但没清除 →<img>脱离文档流，父容器高度为0
object-fit: cover 和 object-fit: contain 怎么选？
这不是“哪个好看”，而是“内容是否允许裁剪”：
-
object-fit: cover：等比缩放后填满容器，边缘裁剪 → 适合轮播封面、头像、卡片图；必须配object-position控制锚点，例如object-position: center top（保人脸）、object-position: bottom center（保地面） -
object-fit: contain：等比缩放后完整居中显示，四周留白 → 适合证件照、产品主图、图标；此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: fill就是默认行为，强制拉伸，慎用
移动端必须配的三要素
缺一不可，否则 object-fit 形同虚设：
- 容器要有可推导的宽高比例：优先用
aspect-ratio: 16 / 9（iOS 15+/Android Chrome 稳定），fallback 用padding-bottom: 56.25%+position: relative -
<img>必须设width: 100%+height: 100%（或height: auto配合容器锁高），并加display: block消除行内间隙 - 用
object-fit: cover时，父容器一定要加overflow: hidden，否则裁剪部分会溢出破坏布局
iOS Safari 和安卓 WebView 的真实兼容性
Can I Use 标记“支持” ≠ 实际可用：
- iOS Safari ≤13.3 完全不支持
object-fit在<img>上生效，加-webkit-object-fit也无效，会退化为fill（即拉伸） - 安卓部分低端 WebView（如某些定制 ROM 内置浏览器）压根不认
object-fit，加了等于没加 - 横屏切换、软键盘弹出、动态内容加载都会导致容器宽高比突变，
cover可能让一张400×300的图缩成图标大小，得用媒体查询兜底
真机测试时最容易忽略的，是容器高度是否真的生效——哪怕写了 height: 200px，也可能被 flex 或 grid 的隐式行为覆盖掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
