object-fit 失效主因是容器缺失宽高或比例基准，需确保父容器有明确尺寸、避免浮动塌陷、设 display: block 消除基线留白，且不可用于 background-image；cover/contain 选择取决于是否允许裁剪，配合 object-position 精确控制裁剪焦点。
加了 object-fit 还是变形，大概率不是属性写错了，而是容器没“框住”图片——它需要明确的宽高或比例基准才能工作。
为什么 object-fit: cover 没反应？
浏览器根本不知道“填满谁”，因为图片父容器高度塌陷、或图片自身没尺寸约束。常见现象包括：img 依然按原始像素撑开、左右浮动后上下错位、在 flex 容器里被压缩成一条线。
- 父容器用了
float但没触发 BFC（比如没设overflow: hidden或display: flow-root），导致高度为 0 - 只写了
width: 100%，没配height、aspect-ratio或max-height -
img是 inline 元素，默认带基线留白，height计算受干扰，建议加display: block - 用在
background-image上——object-fit对它完全无效，得换background-size
contain 和 cover 到底怎么选？
这不是风格偏好，而是内容语义决定的：要不要完整可见？能不能接受裁剪？
-
object-fit: contain：适合产品主图、证件照、图标。整张图必须露出来，留白可接受。此时object-position影响很小 -
object-fit: cover：适合封面图、头像、卡片缩略图。要求填满无空隙，允许裁剪。但默认居中裁剪可能切掉人脸或 Banner 文字，必须配合object-position -
object-fit: fill：强制拉伸，必然变形，除非刻意做故障效果，否则一律避免 -
object-fit: scale-down：适合组件库场景，图源尺寸不确定时兜底——取none和contain中更小的渲染尺寸
如何配 object-position 控制裁剪焦点？
object-fit: cover 只管“等比填满”，裁哪边由 object-position 决定，默认是 center center。关键内容偏上、偏左、偏下时，必须手动调锚点。
- 人像常用
object-position: center top，保全脸部 - Banner 文字在底部 →
object-position: center bottom - Logo 靠左 →
object-position: left center - 支持百分比（如
20% 30%）、关键词（top/right等），但不能混用单位
响应式下最稳的写法是什么？
现代项目优先用 aspect-ratio 锁比例，再配 width: 100% 和 object-fit。老浏览器 fallback 要提前想好。
- 推荐写法：
<div style="width: 100%; aspect-ratio: 16/9;"> @@##@@ </div>
- 不支持
aspect-ratio的环境（如 Safari ≤14.1），改用padding-bottom: 56.25%+position: relative+ 绝对定位img - iOS Safari ≤13.3 不支持
object-fit，加-webkit-object-fit也无效，硬上会退化为fill行为。必须用background-image替代，或 JS 检测后降级
真正容易被忽略的是：object-fit 不是独立生效的属性，它依赖你手动重建那个被破坏的尺寸上下文——比如浮动塌陷后补 min-height，flex 子项没设 align-items 导致留白全在下方，Safari 13 下直接写却没 fallback。这些地方一松动，图片就立刻崩形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
