object-position

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

CSS 属性 object-position 规定了可替换元素的内容,在这里我们称其为对象(即 object-position 中的 object)在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分,则会显示该元素的背景。

你还可以使用 object-fit 属性来改变可替换元素的对象的内在的大小(即它看上去的大小)的调整方式,借助拉伸与缩放等使对象更好地适应元素的内容框。

尝试一下

语法

css
/* 关键字值 */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* <percentage> 值 */
object-position: 25% 75%;

/* <length> 值 */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* 边缘偏移值 */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/* 全局关键字 */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

取值

<position>

使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。

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

形式定义

初始值50% 50%
适用元素替换元素
是否是继承属性
Percentagesrefer to width and height of element itself
计算值as specified
动画类型a repeatable list

形式语法

object-position = 
<position>

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

<length-percentage> =
<length> |
<percentage>

示例

定位图像内容

HTML

HTML 包含两个 <img> 元素,分别展示了 MDN 的 logo。

html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

CSS

CSS 包括 <img> 元素本身的默认样式,以及两个图像各自的样式。

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

第一个图像的左边缘距元素框左边缘 10 个像素。第二个图像的右边缘与元素框的右边缘齐平,并位于元素框高度下方 10% 处。

结果

规范

Specification
CSS Images Module Level 3
# the-object-position

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
object-position

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见