object-fit在移动端不是自动适配开关，必须配合明确宽高约束才能生效；缺尺寸则静默失效，导致拉伸、黑边或留白失控。
直接说结论：object-fit 在移动端不是“写了就生效”的自动适配开关，它只在有明确宽高约束的容器里起作用；没设 width 或 height，或者父容器塌陷，它就静默失效——图照样拉伸、高度为 0、真机上黑边或留白失控。
为什么加了 object-fit: cover 还是拉伸或裁不全
根本原因是浏览器没“盒子”可填。比如只写：
img { object-fit: cover; }
但没给 img 或其父容器任何尺寸（height: auto 且父级也没高），渲染时连容器高度都算不出来，object-fit 就不会触发缩放逻辑。
- Flex 容器中常见陷阱：
align-items: stretch会强行把img拉高，哪怕你只写了width: 100% - 用了
float但没清除，img脱离文档流，父容器高度塌陷为 0 - DevTools 里看到
img实际高度是 0 或远小于预期 → 先查父容器是否真的撑开了 - uni-app 或微信小程序里直接不支持
object-fit，CSS 层面被忽略，必须改用<image mode="aspectFill"></image>
移动端必须配齐的三要素（缺一不可）
object-fit 要生效，得让浏览器能推导出“这个盒子多大”，靠的是显式或可计算的尺寸约束：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器必须有可推导的宽高比例：优先用
aspect-ratio: 16 / 9（iOS 15+/Chrome 稳定），fallback 用padding-bottom: 56.25%+position: relative -
img必须设width: 100%+height: 100%（或height: auto配合父容器锁高），并加display: block消除行内间隙 - 用
cover时，父容器一定要加overflow: hidden，否则裁剪部分会溢出破坏布局
iOS Safari 和安卓 WebView 的真实兼容性
Can I Use 标记“支持” ≠ 实际可用：
- iOS Safari ≤13.3 完全不支持
object-fit在img上生效，加-webkit-object-fit也无效，会退化为fill（即拉伸） - 安卓部分低端 WebView（如某些定制 ROM）压根不认该属性，写了等于没写
- 横屏切换、软键盘弹出、动态加载内容都会导致容器宽高比突变，
cover可能让一张 400×300 的图缩成图标大小，得用媒体查询兜底，例如横屏切回max-width: 100% - IE 全系完全不解析
object-fit，CSS 解析器直接跳过，此时强行加width: 100%; height: 100%会导致拉伸模糊，必须换背景图降级
cover 和 contain 怎么选，关键看内容是否允许裁剪
这不是“哪个好看”，而是业务逻辑决定的：
-
object-fit: cover：等比缩放后填满容器，边缘裁剪 → 适合轮播封面、头像、卡片图；必须配object-position控制锚点，例如object-position: center top（保人脸）、object-position: bottom center（保地面） -
object-fit: contain：等比缩放后完整居中显示，四周留白 → 适合证件照、产品主图、图标；此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: fill就是默认行为，强制拉伸，慎用
最容易被忽略的，是容器高度是否真的生效——哪怕写了 height: 200px，也可能被 flex 或 grid 的隐式行为覆盖掉；真机测试时，别只盯着样式写了没，要盯住 computed height 是多少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
