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

 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 | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ 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.

浏览器兼容性

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.

See also

文档标签和贡献者

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