CSS object-position 属性
最后更新于：2022-03-27 02:44:12
CSS object-position 属性
实例
根据容器大小重置图片的大小，并设置图片的位置：
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
标签定义及使用说明
object-position 属性一般与 object-fit一起使用，用来设置元素的位置。
object-position 一般用于 img 和 video 标签。
| 默认值: | 50% 50% |
|---|---|
| 继承: | 是。 |
| 动画: | 是。 关于 CSS 动画 尝试一下 » |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.objectPosition=”0 10%” 尝试一下 » |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| object-position | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
语法
object-position: position|initial|inherit;
属性值
| 值 | 描述 | |
|---|---|---|
| position | 指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值，第二个值为 y 坐标位置的值。表示的方式有：
object-position: 50% 50%; object-position: right top; object-position: left bottom; object-position: 250px 125px; |
|
| initial | 设置为默认值，关于 initial | |
| inherit | 从该元素的父元素继承属性。 关于 inherit |