object-position

 object-position 属性规定了指定元素的替换内容在其盒子内的对齐方式。

/* <position> values */
object-position: center top;
object-position: 100px 50px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

语法

Values

<position>

用1到4个值来定义该元素的2d定位。可以使用相对或绝对偏移量。注意：这种定位方式可以将替换内容定位到元素的边框之外。

Formal syntax

<position>
where 
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where 
<length-percentage> = <length> | <percentage>

例子

HTML

<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"/>
<img id="object-position-3" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
<img id="object-position-4" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>

CSS

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

/*#object-position-1的表现和#object-position-2的表现一样*/
#object-position-2 {
  object-position: 50%;
}

#object-position-3 {
  object-position: 10px;
}

#object-position-4 {
  object-position: 100% 10%;
}

输出

规范

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

相关链接

• 其他与图片相关的css属性: object-fit, image-orientation, image-rendering, image-resolution.