CSS object-position 属性

CSS object-position 属性定义了一个对象相对于其容器的位置。该属性通常用于控制图片的位置，使图片在其容器中居中或离容器某一边缘对齐等操作。

语法

object-position: x-position y-position;

• x-position：定义对象在 X 轴上的位置，可取值如下：
  • left：相对于其容器的左边缘对齐；
  • center：相对于其容器的中心对齐；
  • right：相对于其容器的右边缘对齐；
  • length，如 10px：相对于其容器左边缘的距离，也可使用负值表示相对于右边缘；
  • percentage，如 50%：相对于其容器宽度的百分比，也可使用负值表示相对于右侧。
• y-position：定义对象在 Y 轴上的位置，可取值如下：
  • top：相对于其容器的上边缘对齐；
  • center：相对于其容器的中心对齐；
  • bottom：相对于其容器的下边缘对齐；
  • length，如 10px：相对于其容器顶部的距离，也可使用负值表示相对于底部；
  • percentage，如 50%：相对于其容器高度的百分比，也可使用负值表示相对于底部。

示例

img {
  object-position: center;
}

将图片在其容器的中心对齐。

img {
  object-position: top right;
}

将图片在其容器的右上角对齐。

img {
  object-position: 20% 50%;
}

将图片在其容器的水平方向上离左侧 20% 宽度的位置，垂直方向上居中对齐。

注意事项

• 该属性只对被替换元素（如 img，object 等）起作用；
• 该属性可能会影响到被替换元素的元素框（element’s box），如改变垂直位置可能会改变被替换元素的高度；
• 不兼容 IE 等较旧浏览器。

总结

CSS object-position 属性可用于在被替换元素中控制图片的位置，使其相对于其容器居中或对齐于某一边缘。了解该属性的语法和取值，可以在实际应用中方便地实现样式布局，改善用户体验。