object-fit: cover 裁剪偏上是因为 object-position 默认为 0 0（左上对齐），需显式设置 object-position: center（即 50% 50%）实现居中裁剪，提升主体完整性。
为什么 object-fit: cover 裁剪后总偏上？
默认情况下，img 元素使用 object-fit: cover 时，会以「左上角对齐」为锚点进行缩放和裁剪，导致主体（比如人脸）常被切掉下半部分。这不是 bug，而是规范定义的行为——object-position 默认值是 0 0（即 top left）。
- 视觉上“偏上”，本质是图片内容未居中对齐容器中心
-
object-fit: cover必须配合object-position才能控制裁剪基准点 - 移动端常见问题：竖屏人像图在横屏卡片中被砍掉头顶或下巴
用 object-position: center 强制居中裁剪
只需一行声明就能修正对齐基准，让缩放后的图像以容器中心为原点裁剪，显著提升主体完整性。
img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
-
object-position: center等价于object-position: 50% 50% - 支持更精细控制，如
object-position: 30% 40%适合偏移构图 - 注意：该属性对
img - IE 完全不支持，若需兼容可降级为
background-image+background-position: center
响应式场景下动态调整 object-position 的技巧
固定 center 不够灵活——比如横幅图在手机端想突出人物上半身，桌面端则希望展示全身。这时需结合媒体查询或容器查询（container queries）做条件化设置。
@media (max-width: 768px) {
.hero-img {
object-position: 50% 30%; /* 上移一点，保脸 */
}
}
@media (min-width: 769px) {
.hero-img {
object-position: 50% 50%; /* 居中，展全身 */
}
}
- 百分比值比关键词（如
top）更可控，50% 30%表示水平居中、垂直向上偏移 20% - 避免用
top/bottom等关键词，它们在不同浏览器中解析不一致 - 如果父容器用了
aspect-ratio，object-position的百分比仍基于容器宽高计算，无需额外换算
当 img 不适用时，用 background-image 替代的取舍
某些场景下（如需要模糊占位、多层叠加、或 SEO 对图片内容无要求），改用 CSS 背景图反而更可控，且兼容性更好。
立即学习“前端免费学习笔记（深入）”；
.card-bg {
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
- 优势：IE9+ 全支持；可叠加
filter、mask、伪元素装饰 - 劣势：无法被屏幕阅读器识别；
alt文本丢失；不能懒加载（除非用loading="lazy"配合 JS 模拟） - 关键区别：
background-position的center是稳定居中，不像早期object-position在 Safari 有渲染延迟
实际项目中最容易被忽略的是：裁剪是否服务于内容意图。一张产品图可能需要 object-position: 100% 50%（右对齐保留标签区域），而一张风景图用 center 反而割裂地平线。别迷信“居中万能”，先看图，再调值。