object-fit: cover 失效主因是容器尺寸失控或 img 自身未设宽高，需为父容器设明确宽高、img 设 width/height 100% 或 aspect-ratio，并配 object-position: center 实现居中裁剪。
object-fit: cover 本身就能保持比例并居中裁剪，但「不生效」或「裁歪了」几乎全是容器尺寸失控导致的，不是属性写错了。
父容器没设宽高，object-fit: cover 就是摆设
浏览器根本不知道“填满”是指填满多大一块区域。如果父容器 height: auto、display: inline、或者只写了 width: 100% 没配高度，object-fit 会静默退化为默认行为（比如按原始尺寸渲染或被 max-width: 100% 拉伸）。
- 必须给图片的直接父容器设置明确的
width和height（可以是px、rem、vh，或现代写法aspect-ratio） - 避免用
float未清除、display: inline、position: absolute且未设宽高 —— 这些都容易让容器尺寸坍塌 - 别在父容器上写
min-height: fit-content或依赖子内容撑开高度，它和object-fit不兼容
img 元素自身尺寸没写对，object-fit 就没参照系
object-fit 是作用于替换元素内容盒的，它需要知道“图片内容要塞进多大的框里”。如果 img 自己没明确尺寸，浏览器无法计算缩放基准。
-
img必须设width: 100%+height: 100%（不能只写一个） - 不要同时写
max-width: 100%却不设height，这会让高度坍缩为 0 - 如果用
aspect-ratio，推荐直接加在img上（现代写法更稳）：img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
裁剪位置偏了？默认 object-position 是 0 0，不是居中
很多人以为 cover 就等于“居中裁剪”，其实不是。object-fit: cover 默认搭配的是 object-position: 0 0（左上对齐），所以常看到人脸被砍掉下巴——图片被缩放后，左上角钉死在容器左上角，自然偏上。
立即学习“前端免费学习笔记（深入）”；
- 显式写
object-position: center（等价于50% 50%）才能真正居中裁剪 - 需要精确控制裁剪区域时，用百分比更可靠：
object-position: 20% 30%表示图片的 (20%, 30%) 点对齐容器中心 -
object-position只在object-fit: cover或none下才触发裁剪效果；contain下它只影响定位，不裁剪
响应式下裁剪范围突变？这不是 object-fit 的问题，是容器比例变了
object-fit: cover 永远只做一件事：等比缩放图片，直到短边撑满容器，再居中裁剪。它不会“根据屏幕大小动态调整裁多少”——裁得多还是少，完全取决于容器当前的宽高比和图片原始比例的差值。
- 小屏时容器变矮（比如从 16:9 缩成 4:3），图片就会被裁得更多，这是预期行为，不是 bug
- 想缓解突变感，可以用媒体查询分段控制容器
aspect-ratio，例如大屏用16/9，小屏切到4/5（适合人像） - 如果容器宽高比和图片原始比例严重不匹配（比如竖图塞进横容器），再怎么调
object-position也难保主体完整，这时该换图或改布局
最易被忽略的一点：所有这些规则都只对 <img alt="如何解决图片在容器中保持比例并居中裁剪_使用CSS object-fit cover" > 和 <video></video> 生效，<div> 加 <code>object-fit 完全没反应。如果你在调试时发现样式面板里属性灰了、没生效，先确认元素是不是替换元素。
