图片在小屏上“偏了”是因为object-fit: cover默认以图片中心为锚点裁剪，而关键内容（如人脸、LOGO）常不在正中心；需配合object-position（如center top）在媒体查询中动态调整裁剪焦点位置。
为什么图片在小屏上“偏了”而不是居中？
不是图片没居中，是 object-fit: cover 或 background-size: cover 裁剪时默认以图片中心为锚点，而关键内容（比如人脸、LOGO）往往不在正中心。媒体查询本身不改变居中逻辑，它只是帮你**在不同断点下切换裁剪焦点位置**。
object-position 在 <img> 中怎么用？
必须和 object-fit: cover（或 contain）配合才有意义；单独设 object-position 不生效。
- 默认值是
center center，等价于50% 50% - 移动端想突出上半身？改成
center top或50% 10% - 想让左侧产品主图始终可见？试
left center或0 50% - 注意：数值单位支持
%、px、关键词（top/bottom/left/right/center），但不要混用top 20px这类写法，部分浏览器不认
示例：
.hero-img {
width: 100%;
height: 400px;
object-fit: cover;
object-position: center center;
}
<p>@media (max-width: 768px) {
.hero-img {
object-position: center top; /<em> 小屏优先显示上半部分 </em>/
}
}
background-position 控制背景图焦点的要点
适用于用 background-image 实现响应式大图的场景，原理和 object-position 类似，但语法更宽松。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 同样依赖
background-size: cover才能触发裁剪行为 - 支持双值写法：
background-position: 20% 30%表示横向 20%、纵向 30%，原点在左上角 - 关键词组合更直观：
left top、right bottom、center 20%都合法 - 别忘了加
background-repeat: no-repeat，否则位移无效
常见错误：写了 background-position 却漏掉 background-size: cover，结果图片被拉伸而非裁剪，位移完全看不出效果。
哪些情况媒体查询反而会让居中失效？
不是媒体查询有问题，是基础布局没兜住。
- 父容器没设
height或min-height，导致小屏下容器塌陷，object-fit失去作用范围 - 图片宽高比剧烈变化（如桌面用横图、移动端切竖图），仅靠
object-position补救不够，得配合不同srcset或picture元素 - 用了
transform: translate(-50%, -50%)居中但没限制父容器overflow: hidden，裁剪区域外的内容仍会溢出并影响布局流
真正需要关注的，从来不是“怎么写媒体查询”，而是“裁剪发生时，容器是否稳定、图片源是否合理、焦点偏移是否有视觉依据”。
