如果已经设置了object-fit: cover，图片仍然出现拉伸变形，问题通常不在这个属性本身，而是浏览器无法获取一个可计算尺寸的容器“盒子”。此时有三个关键条件必须同时满足：容器必须具备明确的宽高，可通过aspect-ratio或padding-bottom来定义尺寸；img需要同时设置width:100%、height:100%和display:block；父容器还要补充overflow:hidden。只要缺少其中任意一项，图片显示效果就很容易出现偏差。
object-fit: cover 为什么设置了还是会拉伸变形
并不是属性写错了，而是浏览器根本没有可用于填充的“盒子”——object-fit 只负责决定图片如何放入一个已知尺寸的容器中；如果容器本身没有明确尺寸，它实际上就无法正常生效。
常见的失效场景包括：
img只设置了width: 100%，却没有设置height、aspect-ratio，也没有使用padding-bottom来模拟高度 → 图片会按照原始尺寸把容器撑开- 父容器使用了
display: flex或grid，但子项没有设置min-height或height: 100%，导致加载过程中高度塌陷为 0 - 使用了
float却没有清除浮动，父容器高度变成 0，img实际渲染状态异常，影响图片自适应显示 - Bootstrap 的
img-fluid类自带height: auto，会与object-fit: cover产生冲突，必须手动显式覆盖
必须同时满足的三个硬性条件
要让 object-fit: cover 稳定且可靠地生效，这三点缺一不可：
- 容器（
img本身或它的父元素）必须拥有可计算的宽高：推荐使用aspect-ratio: 16 / 9+width: 100%；对于老旧浏览器，可使用padding-bottom: 56.25%+position: relative作为兼容方案 img需要设置width: 100%+height: 100%（或height: auto配合容器固定高度），并加上display: block来消除行内元素基线间隙- 父容器一定要添加
overflow: hidden，否则被裁剪的图片部分可能会溢出容器边框
cover 和 contain 到底该怎么选
这并不只是视觉风格上的选择，更关键的是看实际展示需求：
object-fit: cover：图片会等比缩放并裁剪边缘，从而完整铺满整个容器 → 适用于卡片配图、轮播封面、头像框等场景。但默认的object-position: center center可能会裁掉人物面部，因此通常需要配合object-position: center top等方式做细节微调object-fit: contain：图片会等比缩放后完整展示，通过留白来补足容器空间 → 更适合证件照、商品细节图、图标等需要完整显示内容的场景。此时object-position基本影响不大，因为整张图片本身都处在可视区域内object-fit: fill（默认值）：会强制拉伸图片以填满容器，从而破坏原始宽高比。除非是刻意做特殊视觉效果，否则通常都应避免使用
Safari 13.3 及更早版本的兼容性如何处理
iOS Safari 13.3 以及更早版本，并不支持 object-fit 在 img 元素上正常生效，即使加上 -webkit-object-fit 前缀也没有作用，最终仍会退化为 fill 行为，也就是图片被直接拉伸。
更稳妥的降级处理方案包括：
- 使用背景图替代：
background-image+background-size: cover，但这样会失去img标签的语义化优势以及部分 SEO 收录价值 - 引入 polyfill（例如
object-fit-images），只在检测到浏览器不支持时再按需加载 - 对于关键展示场景（如头像、封面图），在服务端直接裁剪并返回固定比例图片，从根源上规避前端适配问题
真正容易被忽视的一点是：你写下的每一条 object-fit 规则，背后都依赖一个稳定且可测量的渲染上下文——这个“框”必须由开发者主动定义，浏览器不会自动帮你计算。
