object-position 调整响应式图片裁剪焦点需满足三前提：容器有明确宽高、图片撑满容器、必须搭配 object-fit: cover；其值定义原图锚点对齐容器中心，配合媒体查询可实现横竖屏自动切换焦点。
在 H5 页面中，用 object-position 调整响应式图片的裁剪焦点，核心是让关键内容（比如人脸、产品主视图）始终落在可视区域中心，而不是依赖默认居中。它不改变图片本身，只控制“哪一块被显示出来”，配合 object-fit: cover 才真正生效。
必须满足的三个前提条件
很多开发者写了 object-position 却没效果，往往卡在这三步：
-
容器要有明确宽高：不能只写
width: 100%，得加上height或aspect-ratio（如aspect-ratio: 4/5），否则浏览器不知道“裁到多高” -
图片自身要撑满容器：给
<img>加width: 100%; height: 100%，否则object-fit和object-position失去作用对象 -
必须搭配
object-fit: cover（或contain）：单独写object-position完全无效；fill和none也不触发裁剪逻辑
常用裁剪锚点写法与适用场景
object-position 的值表示“原图上的哪个点对齐容器中心”。百分比基于原图尺寸，不是容器尺寸：
-
center top或50% 0%：适合人像、LOGO、顶部构图——把原图上边缘对齐容器中心线，确保脸部完整可见 -
center bottom或50% 100%：适合建筑底部、产品平铺、带地面的场景 -
left center或0% 50%：实现“左侧留白+右侧自适应裁剪”，类似 Nike 首屏英雄图效果 -
30% 20%：精确控制——把原图横向 30%、纵向 20% 的位置对齐容器中心，适合已知主体坐标的图片
用媒体查询实现横竖屏自动切换焦点
仅靠 max-width 媒体查询容易误判（比如折叠屏展开后宽度大但仍是竖屏）。更可靠的是按屏幕“胖瘦”匹配：
-
@media (min-aspect-ratio: 1/1)：匹配正方形及以上（桌面、平板横屏），常用object-position: center center -
@media (max-aspect-ratio: 9/16)：匹配典型手机竖屏，可设为object-position: center top，避免头部被切
这样同一张图，在不同设备方向下自动调整裁剪区域，无需多图、不增请求。
调试小技巧：快速验证是否生效
加个红色轮廓最直观：
- 给
<img>加outline: 1px solid red - 给容器加
border: 1px solid blue或box-shadow: 0 0 0 1px green - 如果红框不动、里面图片内容左右滑动 →
object-position正常工作；如果整个红框跟着偏 → 问题出在父级定位或 margin/padding 上
