object-fit: cover需配合明确宽高和object-position: center才能居中裁剪；失效主因是父容器未设高度或塌陷，导致浏览器无尺寸基准执行缩放裁剪指令。
直接用 object-fit: cover + 明确宽高 + object-position: center 就能实现居中裁剪，但 90% 的失效都卡在容器没设高度或父级塌陷上。
为什么 object-fit: cover 没反应？
它不是“开关”，而是“缩放指令”——没有明确的容器尺寸，浏览器根本不知道“cover 到多大”。常见失效场景：
- 父容器用
display: flex但没设height，img的计算高度为0px - 只写了
object-fit-cover（如 Bootstrap 类），却漏了h-250或style="height: 200px;" -
img外层是div，但该div高度由内容撑开（即height: auto），此时100%高度无效 - 图片 404 或 CORS 加载失败，
img渲染为空白，object-fit失去作用对象
object-fit: cover 和 object-position 怎么配才真居中？
object-fit: cover 默认已居中裁剪，因为它的默认 object-position 是 center center。但“视觉居中”不等于“内容居中”——比如人像，重点在脸部，不是几何中心。
- 想保留头顶？用
object-position: center top（上移焦点） - 产品图底部有 logo？用
object-position: center bottom - 要精确到像素偏移？支持
object-position: 50px 80px，但注意：仅当object-fit为cover、contain或scale-down时生效 - 别写
object-position: 50% 50%—— 这和center center等价，纯属冗余
用 img 标签还是 background-image？
选 img 标签，除非你明确放弃语义和用户操作能力。
立即学习“前端免费学习笔记（深入）”；
-
img支持右键保存、拖拽、SEO、无障碍读取；background-image不支持 -
background-image的background-size: cover确实更稳（不依赖元素尺寸计算），但它把图片降级为装饰，无法被爬虫识别，也无法被屏幕阅读器读取 - 如果必须用
img但又要防拉伸，别混用img-fluid（它带height: auto）和object-fit-cover——二者逻辑冲突，会出视觉错位 - 响应式固定宽高比？优先用
aspect-ratio: 16/9+width: 100%+object-fit: cover，比 JS 计算或 padding-top hack 更干净
裁剪后怎么导出或上传裁剪区域？
object-fit 只改显示，不改数据。你看到的“裁剪效果”，对 JavaScript 来说仍是原图全貌。
- Canvas 截图需手动调用
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)，其中sx/sy要根据object-fit行为反推裁剪坐标 - 前端上传前裁剪？得用
canvas+drawImage重新绘制可见区域，不能靠 CSS - 服务端裁剪？传原始图 + 前端计算的裁剪参数（宽高、焦点偏移），由后端按比例截取
最常被忽略的一点：所有这些控制都发生在渲染层，DOM 中的 img.src 从头到尾没变过。以为加了 cover 就能拿“裁剪后图片”去发请求？那得自己动手截。
