object-position生效需同时满足三个条件：object-fit为cover或contain、容器有明确宽高、img设为块级；其值按“水平 垂直”顺序，百分比以图像边缘对齐容器边缘为基准。
为什么设置了 object-position 却没变化
最常踩的坑是漏写 object-fit。浏览器遇到单独的 object-position 会直接忽略，不报错也不警告，容易反复检查拼写或路径。
必须同时满足三个条件才生效：
-
object-fit值为cover或contain（fill、none、scale-down下无效） - 容器有明确宽高（例如
width: 300px; height: 200px；仅width: 100%+ 无高度会导致裁剪逻辑不触发） -
<img>是块级行为（建议加display: block，避免默认 inline 导致底部留白干扰视觉判断）
object-position 的值怎么写才对
语法和 background-position 相似，但含义不同：它移动的是图像内容本身，不是背景图层。顺序始终是「水平 垂直」，空格分隔。
- 关键词组合：
center top、right bottom、center（等价于50% 50%） - 百分比：0% 表示图像左/上边缘对齐容器左/上边缘；100% 表示图像右/下边缘对齐容器右/下边缘。例如
object-position: 75% 25%= 图像横向 75% 处对齐容器左边缘，纵向 25% 处对齐容器上边缘 - 像素值合法但慎用：
object-position: -120px 40px（负值向左/上，正值向右/下），响应式断点下易错位 - 优先用百分比——适配不同宽高比容器更稳定
怎么让脸部/主体始终居中可见
关键不是“把人放在中间”，而是“把原图中你想保留的位置，对齐到容器中心线”。例如一张人像，脸部在原图垂直方向约 30% 处（从顶部算起），想让它出现在容器正中，就设 object-position: center 30% ——意思是“把原图纵向 30% 那条线，对齐到容器纵向中心线”。
- 通用人脸偏上构图：
object-position: 50% 40%比50% 50%更稳妥，能保住额头和眼睛 - 风景图顶部留白多：
object-position: center top（等价于50% 0%） - 人像需保脚部或地面：
object-position: center bottom（等价于50% 100%） - 可结合 CSS 自定义属性动态注入：
object-position: var(--focus-x, 50%) var(--focus-y, 50%);
如何用媒体查询适配横屏竖屏焦点切换
单靠固定值无法应对不同设备宽高比。用 @media (min-aspect-ratio: ...) 比单纯查 max-width 更精准，因为焦点偏移取决于容器自身的比例，而非屏幕宽度。
- 横屏（如 16/9）常用：
object-position: center center - 竖屏（如 4/5 或 9/16）若人物偏上，改用：
object-position: center top - 推荐写法：
@media (max-aspect-ratio: 4/5) { img.hero { object-position: center top; } } - 调试时务必加
outline: 1px solid red到<img>，确认是图片内容在动，而不是整个容器位置偏了
真正难的不是写对值，而是判断“原图中哪个坐标点该对齐容器中心”。这需要你打开原图用取色器或标尺工具量出关键区域的相对位置——多数人卡在这一步，而不是 CSS 语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
