object-fit在移动端失效的根本原因是容器缺乏可推导的宽高，“没盒子可填”；必须配合显式尺寸或aspect-ratio、display: block及overflow: hidden才能生效，否则静默失效。
移动端 object-fit 失效的根源是“没盒子可填”
不是属性写错了，也不是浏览器 bug，而是 object-fit 本身不定义尺寸——它只决定“内容怎么往已有盒子里摆”。如果 img 或其父容器没有可推导的宽高（比如只写 width: 100%、height: auto，或父级塌陷），浏览器连容器多大都算不出来，object-fit 就静默不生效。真机上常见表现：图片高度为 0、拉伸模糊、黑边失控、横屏后缩成小点。
iOS Safari 和安卓 WebView 的支持差异远超 Can I Use 标记
Can I Use 显示“支持”，不等于你写的 object-fit: cover 在真机能跑通：
- iOS Safari ≤13.3：完全不支持
object-fit在img上生效，加-webkit-object-fit也无效，行为退化为fill（即拉伸） - iOS Safari 9.3–13.2：需显式加
-webkit-object-fit: contain，且 Autoprefixer 配置必须含safari >= 9 - 安卓低端 WebView（如某些定制 ROM 内置浏览器）：CSS 解析器直接跳过该声明，写了等于没写
- 横屏切换、软键盘弹出、动态加载内容时，容器宽高比突变，
cover可能让一张 400×300 的图在横屏下缩成 20×15，用户以为图没加载
uni-app / 微信小程序里 object-fit 本身就是无效的
这不是兼容性问题，是平台限制：object-fit 是 CSS 层面的样式，而小程序环境（包括微信原生和 uni-app 编译到小程序端）的渲染引擎根本不解析该声明，CSS 层面直接忽略。
- 微信小程序必须改用
<image></image>组件的mode属性：aspectFill对应cover，aspectFit对应contain - uni-app 跨端项目若需一致效果，得封装自定义组件：H5 端用
img + object-fit+ 显式宽高，小程序端用<image mode="aspectFill"></image> - 强行在小程序里写
object-fit不会报错，但 DevTools 里查不到该样式生效，也不影响布局——等于白写
IE 和老旧 WebView 必须彻底放弃 object-fit
IE 全系（含 IE11）CSS 解析器直接跳过 object-fit，等同于没写。此时若还保留 width: 100%; height: 100%，图片会强制拉伸模糊，而不是 fallback 到安全行为。
- 降级方案只能是放弃
<img>：改用块级容器 +background-image+background-size: cover+background-position: center - 必须设
background-repeat: no-repeat，否则 IE 下可能默认平铺 - 容器必须有明确宽高或
min-height；若需响应式，aspect-ratioIE 不支持，得用padding-bottom: 56.25%+position: relative+ 绝对定位子元素
align-items: stretch 拉高、是否混用了 max-width 和 width 触发 Safari 重算异常——任何一个环节断掉，整条链路就失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
