object-fit: cover必须配合容器明确宽高或aspect-ratio才能生效，否则因无参照系而失效；常见错误是仅给img设cover但父容器未约束尺寸，导致塌陷。
容器必须有明确宽高或 aspect-ratio 才能生效
直接给 <img alt="在CSS中怎样用object-fit实现响应式图片裁剪？" > 加 object-fit: cover 却没裁剪，八成是容器塌陷了。浏览器需要一个确定的“画布”来计算缩放和裁剪边界，否则 cover 就像没靶子的箭——无处落点。
常见错误写法：<div><img src="x.jpg" style="max-width:90%" alt="在CSS中怎样用object-fit实现响应式图片裁剪？" ></div>，父 <div> 没设尺寸，高度由图片原始高度撑开，<code>object-fit 实际没起作用。
- 推荐做法：用
aspect-ratio: 16/9（Chrome 88+、Firefox 89+、Safari 15.4+）配合width: 100%，不依赖父级高度 - 兼容老 Safari（padding-bottom: 56.25% +
position: absolute的传统 hack - 别在容器上同时写
height: 200px和padding-bottom: 56.25%，会冲突导致高度异常
img 元素要占满容器，不能只靠 width: 100%
object-fit 是“内容在盒子里怎么摆”的规则，前提是盒子被填满。如果 <img alt="在CSS中怎样用object-fit实现响应式图片裁剪？" > 自身没占满容器，哪怕写了 cover，也只裁自己那块小区域，不是整个容器视觉效果。
Bootstrap 的 img-fluid 类默认设 height: auto，这会直接废掉 object-fit —— 因为高度不可控，覆盖行为失去参照。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设
width: 100%; height: 100%，或用 Bootstrap 的w-100 h-100 - 避免和
max-width: 100%+height: auto同时存在，否则强制拉伸或高度塌陷 - Flex/Grid 容器中，若父项未设
align-items: stretch或height，需加flex-shrink: 0防止压缩
裁剪焦点靠 object-position 控制，不是 background-position
object-position 决定图片哪一部分留在可视区内，但它和背景图的偏移逻辑不同：它的百分比基准是图片**原始尺寸**，不是容器。比如 object-position: 20% 30%，意思是“从图片顶部往下量 30% 的位置对齐容器顶部”，不是从容器顶部往下量。
默认 center center 很安全，但构图偏上的头像容易切掉额头，偏左的产品图可能切掉关键文字。
- 人脸常用
object-position: center top，优先保全头部 - 横幅大图若主体偏右，可试
object-position: right center - 必须和
object-fit: cover或contain同时使用，单独写无效 - 不要指望它像
background-position那样支持left 10px top 20px这种混合单位写法（部分浏览器不认）
响应式裁剪的关键是改容器比例，不是改 object-fit
object-fit: cover 本身没有“随屏幕变小就多裁一点”的智能逻辑，它永远按当前容器宽高比执行“等比缩放→填满→裁边”。想让小屏少露肩膀、多露脸，得动容器，而不是动图片。
比如首页大图在桌面端是 16:9，在手机端切为正方形，本质是把容器从 aspect-ratio: 16/9 切到 aspect-ratio: 1/1，图片自动重算裁剪区域。
- 用媒体查询切换
aspect-ratio值，比硬调object-position更可控 - 小屏改
aspect-ratio: 4/5（竖构图）可提升人物展示比例 - 服务端提供多尺寸图 +
srcset，能减少极端比例下的过度裁剪
img-fluid）或 CSS reset 会悄悄重置 height: auto，你得检查 computed styles 确认最终生效的 height 是不是 100%，而不是被覆盖成 auto。
