移动端图片裁剪问题源于object-fit: cover默认以center center为焦点，需用object-position手动调整裁剪焦点；其语法同background-position，支持百分比、像素等值；须配合object-fit生效，并注意横竖屏差异及容器尺寸约束。
移动端图片被裁掉脸、只留脚，不是图片本身问题，而是object-fit: cover默认以center center为裁剪焦点——关键内容不在中心时，必须手动调。
用object-position改裁剪焦点，而不是换图
多数人想“给手机单独切一张图”，其实没必要。只要<img alt="怎么用CSS媒体查询针对不同尺寸的移动端屏幕优化图片显示？" >用了object-fit: cover，就能靠object-position微调显示区域。
-
object-position语法和background-position一致，支持top left、50% 20%、10px 30px等写法 - 百分比值中，第一个是水平偏移（0% = 左边对齐，100% = 右边对齐），第二个是垂直偏移（0% = 顶部对齐）
- 比如人物照想保脸，设
object-position: 50% 20%，相当于把图片上移，让脸部更多留在可视区内 - 别写
object-position: top就完事——它等价于top center，水平还是居中，可能把半张脸切掉
媒体查询断点别硬套max-width: 768px
很多教程直接抄@media (max-width: 768px)，但实际中，同一张图在iPhone SE（375px）和Pixel 7（412px）上需要的object-position值可能完全不同。
- 优先按内容定断点：比如当容器高度缩到
200px以下时，焦点才需要上移，那就写@media (max-height: 200px) - 用
min-width比max-width更易维护，避免样式被意外覆盖，例如@media (min-width: 375px)→@media (min-width: 414px) - 真要兼容老设备，可加
and (-webkit-min-device-pixel-ratio: 2)，但现代项目基本不用——srcset已接管高清屏适配
object-fit和object-position必须配对生效
只写object-position没用，它只在object-fit为cover或none时起作用；contain下它不触发裁剪，自然也不影响焦点。
立即学习“前端免费学习笔记（深入）”；
- 确认父容器有明确宽高，否则
object-fit: cover无参照物，object-position无效 - 别在
img上同时设width: 100%和height: 100%又不设overflow: hidden——溢出部分会撑开布局 - 调试时打开浏览器开发者工具，勾选“显示网格线”或临时加
outline: 1px solid red看容器真实尺寸
最常被忽略的是：同一张图在横屏和竖屏下，最佳焦点位置可能相反——比如竖屏要50% 10%保脸，横屏却要10% 50%保肩部构图。别只写一个@media，加上orientation: landscape分支才完整。
