object-fit 本身不防止拉伸，它只决定图如何填入已有尺寸的容器；若容器无宽高或比例约束，object-fit 即失效。
object-fit 本身不防止拉伸，它只决定“图怎么塞进已知尺寸的盒子里”——如果盒子没尺寸，它就彻底静默失效。
为什么加了 object-fit: cover 还是拉伸变形
不是属性写错了，而是浏览器根本没“框”可填：图片或其父容器缺少可计算的宽高或比例约束。
- 只写了
width: 100%，但height是auto或未声明 → 图片按原始高度撑开容器，object-fit不触发 - 父容器是
display: flex，子img没设min-height或height: 100%→ 加载中高度塌陷为 0 - 用了
float但没清除，父容器高度为 0 →img脱离文档流，渲染位置不可控 - Bootstrap 的
img-fluid含height: auto，和object-fit: cover冲突，必须显式覆盖
让 object-fit 真正生效的三要素
缺一不可。现代写法优先用 aspect-ratio，老浏览器 fallback 到 padding-bottom 技巧。
- 容器（
img自身或其父元素）要有可计算的尺寸：
✅ 推荐：img { width: 100%; aspect-ratio: 16 / 9; }
✅ 兼容 fallback：.img-container { position: relative; padding-bottom: 56.25%; }+img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } -
img必须设width: 100%+height: 100%（或height: auto配合容器锁高），并加display: block消除行内基线间隙 - 父容器记得加
overflow: hidden，否则cover裁剪部分可能溢出边框
cover 和 contain 怎么选，不是看效果，是看语义
这张图里，哪部分绝对不能丢？答案决定了该用哪个值。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后裁剪边缘，填满容器 → 适合轮播封面、产品主图、头像
⚠️ 默认object-position: center center可能切掉人脸，必须配object-position: center top或20% 30%微调焦点 -
object-fit: contain：等比缩放后完整显示，留白补足 → 适合证件照、UI 图标、技术配图
⚠️ 此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: fill：强制拉伸填满 → 会变形，除非刻意做故障效果，否则一律避免
iOS Safari 13.3 及更早版本的兼容性陷阱
iOS Safari 13.3 及之前完全不支持 object-fit 在 img 上生效，加 -webkit-object-fit 前缀也无效，会退化成 fill 行为（即拉伸）。
- 稳妥降级方案：
background-image+background-size: cover，但会丢失alt、SEO 和原生懒加载 - 检测并动态替换：
'objectFit' in document.documentElement.style，不支持时用 JS 替换为picturefallback - @supports 写法：
@supports (object-fit: cover) { ... }，再给不支持环境写降级规则
最容易被跳过的是：你写的每一条 object-fit 规则，背后都依赖一个稳定、可测量的渲染上下文——这个“框”必须由你亲手定义，浏览器不会替你猜。
