CSS object-position属性

定义和用法

object-position属性与object-fit一起使用，以指定如何在其“自己的内容框”中使用x/y坐标定位<img>或>video>。

特征	说明
默认值	50% 50%
继承	有
动画	有。CSS动画参考
CSS版本	CSS3
JavaScript语法	object.style.objectPosition="0 10%"尝试一下

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

属性	IE/Edge	Chrome	FireFox	Safari	Opera
属性名称
object-position	16.0+	31.0+	36.0+	10.0+	19.0+

object-fit: position|initial|inherit;

调整图像大小以适合其内容框，并将图像从左侧放置5px，从内容框顶部放置10％：

img.a {
 width: 200px;
 height: 400px;
 object-fit: none;
 object-position: 5px 10%;
 border: 5px solid red;
}

属性值	描述
position	指定图像或视频在其内容框中的位置。第一个值控制x轴，第二个值控制y轴。可以是字符串（left, center 或 right），也可以是数字（以px或％表示）。允许负值
initial	将此属性设置为其默认值。查看initial关键字
inherit	从其父元素继承此属性。查看inherit关键字