object-fit: cover 需配合 object-position 才能精准裁剪，因 cover 默认居中裁剪；object-position 控制裁剪起始点，需 img 有明确宽高或父容器有确定高度（如 aspect-ratio），否则失效；常见错位源于图片与容器宽高比不一致。
object-fit: cover 配合 object-position 才能真正按比例裁剪
直接用 object-fit: cover 只是让图片填满容器并裁剪溢出部分，但裁剪的“起始位置”默认是居中（object-position: 50% 50%）。如果你希望保留图片特定区域（比如人脸、logo），就必须显式设置 object-position。
-
object-position的值是两个偏移量：水平偏移 + 垂直偏移，支持像素、百分比、关键词（left/top/center等） - 百分比取值逻辑和
background-position一致：0% 0%表示图片左上角对齐容器左上角；100% 100%表示图片右下角对齐容器右下角 - 必须搭配
object-fit: cover或object-fit: none才有效；fill和contain下它只影响定位，不触发裁剪
img 标签必须设宽高，否则 object-position 无效
object-position 是针对替换元素（img、video）内容盒的定位，如果 img 没有明确尺寸（比如只写 width: 100% 且父容器高度未定），浏览器无法确定“容器边界”，object-position 就会静默失效。
- 父容器需有确定高度（如
height: 300px或aspect-ratio: 4/3） - 或直接给
img设width和height（注意保持与预期裁剪比例一致） - 使用
aspect-ratio+width: 100%是更现代、更灵活的方式：
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: 20% 30%;
}
常见裁剪错位原因：图片原始宽高比 ≠ 容器宽高比
裁剪是否“准确”，取决于图片自身比例和容器比例是否匹配。例如：
容器是
400px × 300px（4:3），图片是1200×800（3:2）→ 实际裁剪区域会拉伸或压缩，object-position偏移值需按比例换算-
更稳妥的做法是先用工具或 JS 获取图片真实宽高比，再动态计算偏移值；前端硬编码时建议统一收图规范（如全部提供 16:9 原图）
错误现象：
object-position: 0% 0%却没露出图片左上角 → 很可能是图片被cover拉伸后，左上角已不在可视区调试技巧：临时加
border: 1px solid red到img，再用开发者工具勾选 “Show layout shifts” 观察内容盒实际位置
替代方案：用 background-image + background-position 更可控？
background-image 确实对定位和裁剪更直观（background-size: cover + background-position），但它要求元素是块级且不能直接响应图片加载事件或 SEO 友好。
- 如果业务需要懒加载、
loading="lazy"、alt文本或图片语义化，必须用img标签，那就绕不开object-fit+object-position - 如果只是装饰图、Banner 图，且需精确控制焦点区域（比如 CMS 后台允许编辑
focus point），用背景图反而更容易对接 JSON 配置（{"x": 0.2, "y": 0.3}直接转成20% 30%）
实际项目里，最易被忽略的是：开发时用的本地小图往往比例接近容器，上线后换成大图就错位——务必用真实尺寸图做回归测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
