object-fit 生效需容器有可计算宽高：必须设置 aspect-ratio 或 padding-bottom + position、img 设 width:100% height:100% display:block、父容器 overflow:hidden；ios≤13.3及部分安卓webview不支持，需降级。
只写 object-fit: cover 或 object-fit: contain 没用，必须让容器有可计算的宽高基准，否则浏览器压根不执行缩放逻辑。
为什么加了 object-fit 还是拉伸变形？
因为 object-fit 不是“自动适配开关”，而是“在已有盒子里怎么摆图”的指令。如果容器高度是 auto、父级没设高、或被 Flex/Grid 的默认行为撑开，浏览器连“盒子多大”都算不出来，该属性就静默失效。
- DevTools 里
<img>实际高度为 0 或远小于预期 → 父容器塌陷 - Flex 容器中只写
width: 100%，没设min-height或aspect-ratio→ 子项被align-items: stretch拉高变形 - 用了
float但没清除 →<img>脱离文档流，父容器高度为 0 - Bootstrap 的
img-fluid类含height: auto，和object-fit冲突
必须配齐的三要素（缺一不可）
现代移动端要让 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 的图缩成图标大小，得用媒体查询兜底，比如@media (orientation: landscape)切回max-width: 100% - uni-app 或微信小程序环境不支持
object-fit，必须改用<image mode="aspectFill"></image>或背景图降级
容易被忽略的关键点
真机测试时最常漏掉的是：容器高度是否真的生效——哪怕写了 height: 200px，也可能因父级塌陷、flex 布局干扰或 CSS 优先级覆盖而未起作用；object-position 不是可选项，尤其用 cover 时，默认 center center 很可能切掉人脸或关键信息；Safari 13.3 以下环境直接写 object-fit 就是无效代码，必须用 @supports 或 JS 检测做降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
