object-position

**object-position** CSS 属性指定所选 替换元素 内容在其元素框内的对齐方式。元素框中未被替换元素对象覆盖的区域将显示元素的背景。

您可以使用 object-fit 属性调整替换元素对象的内在大小（即其自然大小）如何调整以适应元素框。

试一试

语法

css
/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

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

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

/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

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

值

<position>

一个到四个值，定义元素的二维位置。可以使用相对或绝对偏移量。

**注意：**可以将位置设置为替换元素绘制在其框之外。

正式定义

初始值50% 50%
应用于替换元素
继承是
百分比指元素本身的宽度和高度
计算值如指定
动画类型可重复列表

正式语法

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

这里我们看到包含两个 <img> 元素的 HTML，每个元素都显示 MDN 徽标。

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% 处。

结果

规范

规范
CSS 图像模块级别 3
# the-object-position

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅