object-fit: cover没裁剪的最常见原因是容器缺乏明确宽高基准，必须同时满足：容器设width/height或aspect-ratio、img设width:100%;height:100%、容器设overflow:hidden。
object-fit: cover 为什么没裁剪？检查这三处
最常见失效原因是容器没有明确尺寸基准，object-fit 就像一把尺子，但没画线的地方它量不了。必须同时满足：容器有 width 和 height（或 aspect-ratio），img 设 width: 100%; height: 100%，容器设 overflow: hidden。
容易踩的坑：
- 父容器是
flex-item或grid-item，但没写flex-shrink: 0，导致它被内容撑塌，height实际为0 -
img上写了max-width: 100%却漏了height: 100%，高度坍缩，object-fit失去作用域 - 用
padding-bottom技巧时，忘了给容器加position: relative，子元素绝对定位就飘走了
用 padding-bottom 锁定宽高比（兼容 aspect-ratio 不足时）
当目标比例是 16:9，直接算 padding-bottom: 56.25%（因为 9 ÷ 16 = 0.5625），这个百分比值永远基于父容器宽度计算，所以能稳住比例。
关键结构要写全：
- 容器加
position: relative - 内部
img或包裹层设position: absolute; top: 0; left: 0; width: 100%; height: 100% -
img必须声明object-fit: cover和object-position: center（否则可能偏移） - 别写
height: 56.25%——这是无效的，CSS 中百分比height在无显式父高时不起作用
cover 和 contain 怎么选？看业务意图
object-fit: cover 是封面图首选：等比缩放后裁边填满，适合轮播、卡片、头像框。但默认居中裁剪，人脸可能被切，得配 object-position: top 微调。
object-fit: contain 适合证件照、产品主图这类“必须完整可见”的场景：等比缩放后留白，不裁不拉伸。此时 object-position 基本无效，因为整张图都在可视区里。
绝对要避开 object-fit: fill——它强制拉伸，除非你做故障艺术。
IE 兼容不是加个 fallback 就完事
IE 完全不支持 object-fit，Edge 16+ 才开始支持。只写 width: 100%; height: auto 降级，用户看到的是未裁剪+上下/左右大片留白，电商封面图会显得廉价。
更务实的做法：
- 关键图用
background-image+background-size: cover，再通过伪元素或额外 DOM 加alt文本模拟语义 - 引入
object-fit-imagespolyfill，但注意它会触发大量getComputedStyle查询，首屏性能敏感页慎用 - 真正容易被忽略的，是容器盒模型是否“真实存在”——比如 Flex 容器里一个没设
min-width的图片项，在窄屏下可能被压缩到看不见，这时候裁剪根本无从谈起
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
