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

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 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。

注意:这些定位方式允许被替换元素的对象被定位到内容框外部。

正式语法

<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

Here we see HTML that includes two <img> elements, each displaying the 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

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

The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.

输出

规范

Specification Status Comment
CSS Images Module Level 3
object-position
Candidate Recommendation Initial definition.

初始值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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
object-positionChrome Full support 31Edge Full support 16Firefox Full support 36IE No support NoOpera Full support 19
Full support 19
Full support 11.6
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 10WebView Android Full support 4.4.3Chrome Android ? Edge Mobile ? Firefox Android Full support 36Opera Android Full support 24
Full support 24
Full support 11.5
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 10Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见

文档标签和贡献者

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