必须满足容器有确定宽高且图片设width:100%;height:100%;两个硬性条件，否则object-fit不生效；cover裁剪填满适合视觉优先场景，contain等比留白适合信息完整优先场景。
要用 object-fit 实现图片的精准裁剪和填充，核心不是“写了就有效”，而是让浏览器有明确的计算依据——容器尺寸可算、图片尺寸可继承、裁剪行为可约束。
必须满足两个硬性条件
否则 object-fit 完全不生效：
- 父容器必须有**确定的宽高**（例如
width: 300px; height: 200px;），不能依赖height: auto、min-height或未设高度的 flex 容器 -
img元素自身必须显式设置width: 100%; height: 100%;，只写width: 100%+height: auto会退回到原始比例渲染，cover或contain就没机会起作用
cover 和 contain 怎么选
二者都保持原始宽高比，但缩放逻辑相反，选错直接影响信息传达：
-
cover：等比缩放，直到**短边刚好填满容器**，长边超出部分被裁剪。适合头像、轮播图、卡片封面等“视觉优先”场景；需配合
overflow: hidden防止溢出 - contain：等比缩放，直到**长边刚好贴住容器边界**，短边必然留白。适合产品主图、证件照、图表等“信息完整优先”场景；圆形容器中慎用，容易露出背景色
微调裁剪焦点位置
默认居中裁剪常把人脸切掉上半部分，这时靠 object-position 精准上移主体：
- 写法类似
background-position：object-position: center 10%表示垂直方向向上偏移图片自身高度的 10% - 仅在
object-fit为cover、contain或none时生效，单独写无效 - 搭配圆形头像容器时，
center 10%比默认值更稳妥，让人脸靠近视觉中心
圆形容器里的关键控制点
只加 border-radius: 50% 不够，漏掉任一环节都会导致裁剪失效或边缘溢出：
- 容器必须显式设
width和height（如120px），避免依赖aspect-ratio（旧版 Safari 不支持） - 务必加
overflow: hidden，否则cover裁掉的部分会从圆角边缘漏出 -
img建议设display: block，消除行内元素默认基线对齐造成的底部空隙
