对象位置属性
最后更新：2026-09-13
object-position 对象位置属性
object-position 用于控制替换元素（如 <img>、<video>）的内容在其容器内的显示位置。当 object-fit 导致内容未填满容器或被裁剪时，object-position 可以调整内容的对齐焦点，让关键部分保持在可见区域内。
| 分类 | |
|---|---|
| 初始值 | 50% 50% |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
object-position: <position>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<length> | <percentage> | 类型 | 内容位置坐标 |
left | center | right | top | bottom | 关键字 | 预定义位置 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| object-position | ✓ v30 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v16 |
| 所有主流浏览器均支持 | |||||
提示： object-position 常与 object-fit: cover 配合使用，确保裁剪时保留关键内容（如人物头部）。
提示： 支持关键字（left、center、right、top、bottom）和具体的长度/百分比值，用法与 background-position 类似。
❓ 常见问题
Qobject-position 能动画吗？
A可以。object-position 是长度/百分比类型的属性，支持 transition 和 animation，常用于实现图片悬停时焦点平移的效果，比如鼠标移入时图片从中心缓缓移动到左上角。注意动画会触发重绘，图片很大时留意性能，可配合 transform 等合成属性组合使用。
Qobject-position 的百分比是相对什么的？
A百分比同时相对容器和内容两者的尺寸差来计算。50% 50% 是默认的中心对齐；100% 100% 让内容的右下角与容器右下角重合；0% 50% 让内容左边缘与容器左边缘对齐。简单理解：百分比越大，内容越往对应方向移动，多出的部分被裁剪或留白。
Qobject-fit: cover 和 object-position 怎么配合使用？
Acover 负责填满容器并裁掉多余部分，object-position 负责决定「裁哪里」。例如人物头像要保留头顶，写 object-fit: cover; object-position: top;。做图片墙、电商主图时，把每张图的视觉焦点（人脸、商品主体）对齐到固定位置，观感会专业很多。
Qobject-position: center 和 50% 50% 一样吗？
A效果完全一样，都表示水平和垂直居中。object-position 的位置语法与 background-position 一致，支持 left、center、right、top、bottom 关键字、长度值和百分比，也支持偏移写法如 right 10px top 20px。需要精确控制时用长度或百分比。
🏷️ 相关属性
💡 相关案例
📚 相关教程
