这篇翻译不完整。请帮忙从英语翻译这篇文章

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

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

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

初始值50% 50%
适用元素replaced elements
是否是继承属性yes
Percentagesrefer to width and height of element itself
适用媒体visual
计算值as specified
Animation typerepeatable list of simple list of length, percentage, or calc
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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%;
}

输出

规范

Specification Status Comment
CSS Images Module Level 4
object-position
Working Draft Adds the from-image and flip keywords.
CSS Images Module Level 3
object-position
Candidate Recommendation Initial definition.

浏览器兼容性

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!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 31.0 16 36 (36) 未实现 11.60-o
19.0
10.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4.4 36 (36) 未实现 11.5-o
24
未实现

[1] WebKit Nightly fixed in bug 122811.

相关链接

文档标签和贡献者

标签: 
此页面的贡献者: Ahhaha233
最后编辑者: Ahhaha233,