最常见原因是漏写object-fit；object-position必须与object-fit:cover或contain配合才生效，单独使用无效，且容器需有明确宽高，否则浏览器静默忽略该属性。
object-position 为什么设了没反应
最常见原因是漏写 object-fit。浏览器会直接忽略 object-position，也不报错，看起来就像 CSS 写错了。
object-position 单独用在 <img> 上一定无效；它只在 object-fit: cover 或 object-fit: contain 生效时才起作用。其他值如 fill、none 不触发裁剪/缩放逻辑，object-position 就不生效。
- 容器没设固定宽高（比如只有
width: 100%，父容器高度不定）→ 图像未被裁剪，偏移不可见 - 同时用了
transform或scale()→ iOS Safari 和部分安卓 WebView 中会出现定位漂移 - 图片原始宽高比和容器不一致 → 实际可视区域偏移量需换算，硬写
0% 0%可能根本露不出左上角
object-position 的值怎么写才对
语法和 background-position 相似，但含义不同：它移动的是图像内容本身，不是背景图层。顺序是水平值 + 垂直值。
- 关键词组合：
object-position: center top表示水平居中、垂直对齐顶部 - 百分比基于容器尺寸计算：
0%是容器左/上边缘，100%是右/下边缘；object-position: 75% 25%表示图像左上角落在容器横向 75%、纵向 25% 处 - 支持负值：
object-position: -100px -50px表示往左、往上偏移内容 - 单值写法如
object-position: center等价于center center
如何让头像或轮播图突出主体
这是 object-position 最典型的使用场景：原图宽高比不确定，容器尺寸固定，你希望关键区域不被裁掉。
- 先加
object-fit: cover强制等比缩放并填满容器 - 再用
object-position把原图中“想保留的部分”对齐到容器中心点，例如：object-position: center 30%表示把原图垂直方向 30% 处对齐到容器垂直中心 - 常用组合：
object-position: center top（保天上部分，适合风景图）、object-position: center bottom（保脚部或地面，适合人像） - 调试时建议临时加
outline: 1px solid red到<img>，确认是图像内容在动，而不是容器位置偏了
兼容性和降级方案要注意什么
IE 完全不支持 object-fit 和 object-position；iOS Safari 在极端宽高比或混用 transform 时表现不稳定。
现代浏览器支持良好：Chrome 31+、Firefox 36+、Safari 9.1+、Edge 16+。
- 需兼容 IE 时，只能退回
background-image方案：background-size: cover+background-position: center - 但注意：
background-image无法使用alt、不参与语义化、不响应图片加载事件、SEO 不友好 - 如果必须用
<img>标签且要兼容老系统，建议服务端预裁剪或 JS 动态计算object-position值
aspect-ratio: 16 / 9 配合 width: 100%，也比只写 height: auto 可靠得多。否则所有偏移都是“悬空”的，浏览器根本无从计算。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
