object-fit不生效的根本原因是容器缺乏可计算宽高或宽高比，浏览器无“盒子”可适配；必须确保父容器有明确尺寸（如aspect-ratio、固定高）且img设width/height:100%、display:block、overflow:hidden，三者缺一不可。
加了 object-fit: cover 或 object-fit: contain 还是拉伸，大概率不是属性写错了，而是容器没“框”——浏览器根本不知道往多大的盒子里 fit。
为什么 object-fit 不生效？容器尺寸缺失是主因
浏览器只在 img 元素自身或其父容器有可计算的宽高（或比例）时，才启动 object-fit 的缩放逻辑。否则它退化为默认的 fill 行为，也就是拉伸。
- 常见错误：只给
img写width: 100%，但没设height，也没用aspect-ratio锁定父容器比例 - Flex 布局陷阱：父容器
display: flex+align-items: stretch，会把img拉满高度，而img自身又没设height: 100%，导致尺寸失控 - 别混用
max-width: 100%和width: 100%—— Safari 旧版可能因此重排异常，覆盖object-fit计算 - 忘记
display: block：img是 inline 元素，底部默认留白，干扰实际高度计算
object-fit: cover 和 object-fit: contain 怎么选？语义决定裁剪策略
这不是风格偏好，而是内容是否允许被裁剪的硬约束。
-
object-fit: cover：适合封面图、轮播图、头像——必须填满无空隙，但默认裁剪中心。人脸常被切掉，必须配object-position: center top等微调锚点 -
object-fit: contain：适合证件照、产品主图、图标——整张图必须可见，留白可接受；此时object-position控制的是图片在留白区里的对齐方式（如left top），不是裁剪位置 -
object-fit: fill就是强制拉伸，等同于没写object-fit，除非刻意做故障效果，否则一律避免
响应式下怎么写才可靠？aspect-ratio + width/height: 100% 是最小闭环
推荐写法：.img-wrapper 提供盒子，img 填满并适配：
立即学习“前端免费学习笔记（深入）”；
.img-wrapper {
width: 100%;
aspect-ratio: 4 / 3;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
-
aspect-ratio单独存在只约束容器比例，不控制图片渲染；它只是提供一个“盒子”，真正决定怎么装进去的是object-fit - 老浏览器 fallback：用
padding-bottom: 75%+position: relative+ 绝对定位img替代aspect-ratio - iOS Safari 13.3 及更早版本完全不支持
object-fit，加-webkit-object-fit也无效，会退化成fill。稳妥降级用background-image+background-size: cover，但会丢alt、SEO 和原生懒加载
容易被忽略的细节：inline 元素、语义、兼容性三重坑
最常漏掉的三件事：一是 img 没加 display: block，底部留白让高度不准；二是用 background-image 图省事，结果牺牲了可访问性和 SEO；三是没查 iOS Safari 版本，上线后发现 iPhone 7 用户看到的全是拉伸图。
复杂点不在属性本身，而在你是否意识到：浏览器不会凭空猜你想 fit 到哪个“盒子”里——你得亲手把它画出来。
