根本原因是容器缺乏明确尺寸约束，object-fit仅在已有宽高限制的容器内生效；需确保img或其父容器至少有一个确定的width/height值，否则渲染时宽高比失控导致变形。
为什么加了 object-fit: contain 还是拉伸变形？
根本原因不是属性写错，而是浏览器压根没“盒子”可填——img 没设 height，父容器又靠内容撑高，渲染时宽高比失控。object-fit 不是自动适配开关，它只在已有尺寸约束的容器内生效。
- 检查是否漏写了
width或height：至少一个要是确定值（px、rem、%都行） - Flex 容器里尤其危险：如果父级
display: flex且设了height: 300px，但子img只写了width: 100%没写height，它可能被align-items: stretch拉高变形 - 别混用
max-width: 100%和width: 100%：Safari 旧版本会因此触发尺寸重算异常，导致contain表现不稳定
移动端真机上 object-fit 失效的常见场景
iOS Safari 和安卓 WebView 对 object-fit 的支持差异不小，不能只信 Can I Use 上的“支持”标记。
- iOS Safari 9.3 需要
-webkit-object-fit: contain，Autoprefixer 必须配safari >= 9才能加前缀 - 安卓部分低端 WebView（如某些定制 ROM 内置浏览器）压根不认
object-fit，加了等于没加 - 真机测试别只看竖屏：横屏下容器宽高比突变，
contain可能让原本合适的图突然缩成图标大小，得搭配媒体查询兜底（比如横屏切回max-width: 100%）
uni-app 或微信小程序里 object-fit 不生效怎么办？
uni-app 小程序环境和微信原生小程序都不支持 object-fit，CSS 层面直接忽略该声明。这不是 bug，是平台限制。
- 微信小程序必须改用
<image></image>组件的mode属性：aspectFill对应cover，aspectFit对应contain - uni-app 中若需跨端一致，推荐封装自定义组件：H5 端用
object-fit+ 显式宽高，小程序端用<image mode="aspectFill"></image> - 实在绕不开时，可用背景图降级：
div设固定宽高 +background-image+background-size: cover+background-position: center，但会丢失alt和懒加载能力
IE 或老旧 WebView 的兼容 fallback 方案
IE 全系（含 IE11）完全不解析 object-fit，CSS 解析器直接跳过，等同于没写。此时强行加 width: 100%; height: 100% 会导致拉伸模糊，必须换思路。
- 放弃
<img>，改用块级容器：<div class="bg-img" style="max-width:90%"></div> - 必须设
background-repeat: no-repeat，否则 IE 下可能默认平铺 - 容器必须有明确宽高或
min-height；若需响应式，aspect-ratioIE 不支持，得用padding-bottom: 56.25%+position: relative+ 绝对定位图片 -
background-position语法与object-position相同（如center top），但它是背景图锚点对齐，不是内容框内定位
object-fit 规则，背后都依赖一个稳定、可计算的容器尺寸上下文。这个上下文一旦被浮动、flex 塌陷、或未声明高度破坏，所有缩放逻辑就失效了——不是属性没起作用，是它根本没机会起作用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
