object-fit: cover在移动端没反应，是因为容器缺乏可计算高度，导致浏览器无法确定缩放基准，属性静默退化为fill；必须配合aspect-ratio/height、width: 100%、height: 100%及overflow: hidden才能生效。
为什么 object-fit: cover 在移动端图片上没反应
因为容器没有可计算的高度，object-fit 直接静默退化为 fill。浏览器渲染 <img> 时，必须先确定“这个盒子多高”，才能决定怎么缩放裁切；如果父容器是 display: flex 或仅设了 width: 100% 而没给 height、aspect-ratio 或 padding-bottom，那计算出的高度就是 0px。
常见表现：
-
DevTools里看到img的computed height是0px或远小于预期 - 卡片塌陷，图片“消失”或只露顶部一小条
- 加了
object-fit: cover却还是拉伸变形（实际是退化为fill）
必须设置容器高度的三种可靠写法
不能只靠 img 自身样式，得让容器有可推导的高度基准。选一种即可，按兼容性从高到低排列：
-
现代写法（iOS 15+/Chrome 88+）：
img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }—— 不依赖父级，响应式友好，但老 Safari 会忽略aspect-ratio -
兼容写法（含 Safari 13.3）：父容器设
position: relative; padding-bottom: 75%，img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; -
硬编码兜底（最稳）：
.card-img { width: 100%; height: 240px; object-fit: cover; }—— 注意别和max-width: 100%混用，否则高度约束失效
cover 和 contain 在商品图中怎么选
不是看哪个“更好看”，而是看业务是否允许裁剪：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：适合主图、轮播图、列表缩略图 —— 必须填满、允许裁边；但默认object-position: center center可能切掉商品主体，建议显式加object-position: center top（保顶部标签/Logo）或object-position: 50% 30%（抬高视觉焦点） -
object-fit: contain：适合详情页主图、SKU 图、证件类图 —— 必须完整可见；此时object-position基本无效，因为整张图都在框内 -
绝对避免
object-fit: fill：等同于没写，强制拉伸，商品图失真严重
移动端头像裁切必须配 object-position
object-fit: cover 默认从顶部居中对齐（object-position: 50% 0），人像常被切掉头顶或下巴。真正可用的头像裁切要满足三点：
- 外层
<div>必须设明确width和height（比如48px），不能只靠img自撑 - 该
<div>要加border-radius: 50%和overflow: hidden，否则裁切区域仍是矩形 -
img需设display: block消除 inline 基线间隙，并显式写object-position: 50% 40%（上移焦点，更稳妥）
最容易被忽略的是：设计师给的头像尺寸太小（比如 100×100 像素），在 Retina 屏上模糊——这跟 object-fit 无关，得前端主动推动资源规范落地。
