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