object-fit: cover没反应最常见原因是容器缺乏明确宽高约束，必须同时满足父容器有尺寸（如aspect-ratio或width/height）和img设width:100%;height:100%，否则该属性静默失效。
object-fit: cover 为什么没反应
最常见的情况是：容器没尺寸，object-fit 就没作用对象。它不改变盒模型，只控制「已有尺寸的框里图片怎么放」。如果父容器是 height: auto、只写了 width: 100%、或用了 display: inline，容器实际高度由图片原始尺寸撑开，cover 直接静默失效。
必须同时满足两个条件：
- 图片的直接父容器有明确宽高（比如
width: 300px; height: 200px，或现代写法aspect-ratio: 16 / 9） -
img元素自身设了width: 100%; height: 100%（不能只写一个，也不能用max-width: 100%替代高度）
漏掉 overflow: hidden 也会造成错觉——裁掉的部分溢出显示，看起来像没裁。
cover 和 contain 到底选哪个
二者都保持原始宽高比，但策略相反：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后填满整个容器，超出部分裁剪。适合 banner、头像、卡片图——关键内容需避开边缘，可用object-position: center top微调焦点 -
object-fit: contain：等比缩放至完全可见，居中显示，留白不可避免。适合证件照、产品主图预览、用户上传图——确保文字/五官不被切
别用 fill，它强制拉伸；也别用 none，等于没设。如果业务要求「必须看到全部内容」，contain 是唯一安全选项。
裁剪位置偏了？默认不是居中
object-fit: cover 默认搭配的是 object-position: 0 0（左上对齐），不是居中。所以常看到人脸被砍掉下巴——图片缩放后，左上角钉死在容器左上角。
要真正居中裁剪，必须显式写：
-
object-position: 50% 50%（等价于center center） - 需要精确锚定：比如人像偏上，用
object-position: center 20%把顶部区域保留在可视区 -
object-position只在cover或none下触发裁剪效果；contain下它只影响定位，不裁剪
响应式下怎么稳住裁切效果
object-fit 本身不响应屏幕变化，它只按当前容器尺寸计算。小屏时容器变矮（比如从 16:9 缩成 4:3），图片就会被裁得更多——这是预期行为，不是 bug。
要让效果可控，得控制容器自身比例：
- 现代方案：给父容器加
aspect-ratio: 16 / 9，再配width: 100%，比写死height: 300px更可靠 - 兼容老浏览器：用
padding-top百分比 hack 模拟比例，但会丢失语义和懒加载能力 - 移动端尤其注意：iPhone 竖屏窄高比下，
cover常裁上下，此时object-position: center 20%比默认更安全
真正容易被忽略的是：图片加载完成前，DOM 中只有占位框，object-fit 行为不可控。建议配 loading="lazy" + 占位背景色，或监听 load 事件再激活样式。
