object-position

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

object-position CSS property specifies the alignment of the selected replaced element 's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.

You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit 特性。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

/* <position> values */
object-position: center top;
object-position: 100px 50px;
/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

值

<position>

注意： The position can be set so that the replaced element is drawn outside its box.

形式定义

初始值	`50% 50%`
适用于	replaced elements
继承	yes
百分比	refer to width and height of element itself
计算值	如指定
动画类型	repeatable list of simple list of length, percentage, or calc

形式句法

<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>

范例

Positioning image content

HTML

Here we see HTML that includes two <img> elements, each displaying the MDN logo.

<img id="object-position-1" src="https://yari-demos.prod.mdn.mozit.cloud/files/12668/MDN.svg" alt="MDN Logo"/>
<img id="object-position-2" src="https://yari-demos.prod.mdn.mozit.cloud/files/12668/MDN.svg" alt="MDN Logo"/>

CSS

The CSS includes default styling for the <img> element itself, as well as separate styles for each of the two images.

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.

结果

规范

规范	状态	注释
CSS Images Module Level 3 The definition of 'object-position' in that specification.	候选推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`object-position`	Chrome 完整支持 31	Edge 完整支持 16	Firefox 完整支持 36	IE 不支持 No	Opera 完整支持 19 完整支持 19 完整支持 11.6 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari 完整支持 10	WebView Android 完整支持 4.4.3	Chrome Android 完整支持 31	Firefox Android 完整支持 36	Opera Android 完整支持 19 完整支持 19 完整支持 12 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari iOS 完整支持 10	Samsung Internet Android 完整支持 2.0
Support for three-value syntax of position	Chrome 不支持 31 — 68	Edge 不支持 16 — 79	Firefox 不支持 36 — 70	IE 不支持 No	Opera 不支持 19 — 55 不支持 19 — 55 完整支持 11.6 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari 完整支持 10	WebView Android 不支持 4.4.3 — 68	Chrome Android 不支持 31 — 68	Firefox Android 完整支持 36	Opera Android 不支持 19 — 48 不支持 19 — 48 完整支持 12 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari iOS 完整支持 10	Samsung Internet Android 不支持 2.0 — 10.0

图例

完整支持
不支持
要求使用供应商前缀或不同名称。

另请参阅

Other image-related CSS properties: object-fit , image-orientation , image-rendering , image-resolution .

元数据

最后修改： Jul 20, 2020

CSS
CSS 参考
CSS Images
指南
1. Implementing image sprites in CSS
2. Using CSS gradients
特性
1. <gradient>
2. <image>
3. ~~image-orientation~~
4. image-rendering
5. object-fit
6. object-position

在此页

句法

值