object-position必须配合object-fit:cover或contain才生效，单独使用无效；其作用是重定位缩放裁剪后的图像内容，需容器有明确宽高且图片与容器比例不一致。
object-position 不是独立生效的属性，它必须配合 object-fit 使用才有意义。单独设置 object-position 对默认拉伸的 img（即 object-fit: fill）几乎没效果——因为此时图片已被强制拉满容器，偏移量被“撑开”失效。
为什么 object-position 看起来没反应？
常见错误是只写 object-position，却忘了给 img 设定明确的尺寸和合适的 object-fit 值。比如：
- 容器没设固定宽高，
img仍按自然尺寸渲染，object-position无参照系 - 用了
object-fit: fill（默认值），图片已变形填满，再调位置也看不出变化 - 用了
object-fit: contain，但图片完全在框内，object-position只能微调留白分布，视觉上不明显
object-position 的合法值怎么写？
它的语法和 background-position 高度一致，支持组合写法：
-
object-position: 0 0—— 左上角对齐（注意：不是“左上角像素点”，而是内容左上与容器左上重合） -
object-position: right bottom—— 关键词组合，右下对齐 -
object-position: 20px 10%—— 混合单位，x 方向偏移 20px，y 方向偏移容器高度的 10% -
object-position: calc(100% - 20px) calc(100% - 10px)—— 实现“距右下角 20px × 10px”的定位
记住：第一个值是水平方向（x），第二个是垂直方向（y）；省略第二个值时，y 默认为 50%。
搭配 object-fit: cover 才是最常用场景
这是控制“裁剪式居中/偏移”的黄金组合。例如想让一张人像图始终露出脸部，而不是默认居中裁剪：
img {
width: 300px;
height: 400px;
object-fit: cover;
object-position: 50% 20%; /* 把垂直中心往上提，让脸更靠上 */
}
-
cover确保图片填满容器且不拉伸 -
object-position决定哪一部分被保留——值越小，越往上/往左“推”内容 - 若用
object-position: center top，等价于50% 0，内容顶部对齐容器顶部
浏览器兼容性和容易忽略的细节
object-position 在 Chrome 31+、Firefox 36+、Safari 7.1+、Edge 19+ 支持良好，但 IE 完全不支持。真正容易被忽略的是：
-
object-position的偏移基准是“替换元素的内容盒”，不是容器 padding 区；所以容器加padding不会影响定位逻辑 - 它对
video同样有效，但对 poster 图片（如<video poster="..."></video>）是否生效，取决于浏览器实现——Chrome 中 poster 默认走contain，需显式覆盖 - 动画支持是真·可用：
transition: object-position .3s能平滑移动图片焦点，适合 hover 效果或视差滚动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
