object-position
CSS 属性 object-position 规定了可替换元素的内容，在这里我们称其为对象（即 object-position 中的 object），在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分，则会显示该元素的背景（background）。
你还可以使用 object-fit 属性来改变可替换元素的对象的内在（原文：intrinsic）大小（即它看上去的大小）的调整方式，借助拉伸与缩放等使对象更好地适应元素的内容框。
尝试一下
语法
/* <position> values */
object-position: center top;
object-position: 100px 50px;
/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;
取值
<position>-
使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。
备注： 这些定位方式允许被替换元素的对象被定位到内容框外部。
正式语法
object-position =
<position>
<position> =
[ left | center | right | top | bottom | start | end | <length-percentage> ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ] |
[ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]
<length-percentage> =
<length> |
<percentage>
例子
HTML
Here we see HTML that includes two <img> elements, each displaying the MDN logo.
这里我们看到包含两个 img 元素的 HTML，分别展示了 MDN 的 logo
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
CSS
CSS 包括<img>元素本身的默认样式，以及两个图像各自的样式。
img {
width: 300px;
height: 250px;
border: 1px solid black;
background-color: silver;
margin-right: 1em;
object-fit: none;
}
#object-position-1 {
object-position: 10px;
}
#object-position-2 {
object-position: 100% 10%;
}
第一个图像的左边缘距元素框左边缘 10 个像素。第二个图像的右边缘与元素框的右边缘齐平，并位于元素框高度下方 10％处。
输出
规范
| Specification |
|---|
| Unknown specification # the-object-position |
Browser compatibility
BCD tables only load in the browser
参见
- 其他与图像相关的 CSS 属性：
object-fit，image-orientation，image-rendering，image-resolution(en-US)。