object-fit本身不能解决图片拉伸变形，必须配合明确容器尺寸（如width/height或aspect-ratio）才生效；否则浏览器无基准计算缩放，属性静默失效。
object-fit 能解决移动端图片拉伸变形，但**只加这个属性根本没用**——它必须配合明确的容器尺寸约束才生效，否则浏览器连“往多大框里放图”都算不出来。
为什么加了 object-fit: cover 还是拉伸？
这不是 bug，是浏览器按规范执行：当 <img> 没有可测量的宽高上下文时，object-fit 就没有作用对象。
-
img只写了width: 100%，但height: auto或没设高度 → 容器高度由图片原始尺寸撑开，缩放逻辑失效 - 父容器是
display: flex，子项没设min-height或aspect-ratio→ 高度塌陷，尤其首屏加载时空白一闪 - 用了
float且未清除 →img脱离文档流，父容器高度为 0 - 在 iOS Safari 9.3–13.3 中漏写
-webkit-object-fit前缀 → 属性被直接忽略（Autoprefixer 必须配safari >= 9）
移动端必须锁定容器比例，推荐三种方式
真机测试中，横竖屏切换、键盘弹出、动态内容加载都会导致高度突变，只靠 width: 100% + height: 200px 很容易崩。优先选可推导比例的方式：
-
现代首选：
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }—— 不依赖父容器高度，自身维持比例，iOS 15+/Android Chrome 稳定支持 -
兼容 fallback：父容器设
position: relative; padding-bottom: 56.25%;，img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;—— Safari 13.3 以下也稳 -
简单粗暴但有效：
img { width: 100%; height: 200px; object-fit: cover; }—— 适合卡片高度统一、无响应式需求的场景
contain 和 cover 到底怎么选？
这不是“哪个好看”，而是“内容是否允许裁剪”：
-
object-fit: contain：必须完整显示图片（如产品主图、证件照），四周留白可接受；此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: cover：要求填满无空隙（如轮播封面、头像），允许裁剪边缘；必须配object-position控制裁哪边：object-position: center top（保人脸）、object-position: bottom center（保地面元素） - 别用
fill：它和不写object-fit效果一致，必然拉伸变形
真机测试最容易忽略的三个点
Can I Use 上标“支持” ≠ 实际可用，尤其在低端安卓 WebView 和 iOS 旧版 Safari 上：
- iOS 横屏下容器宽高比突变，
cover可能让一张 400×300 的图缩成图标大小，得用媒体查询兜底：@media (orientation: landscape) { img { object-fit: contain; } } - 某些定制 ROM 内置浏览器（如部分 OPPO、vivo 旧机型）压根不解析
object-fit，加了等于没加，必须降级为background-image+background-size: cover - Safari 9/10 对
object-position支持不全，设了可能被忽略，关键区域（如人脸）不能依赖它
object-fit 是个精密仪器，不是开关按钮。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
