CSS object-position 属性

CSS object-position 属性用于指定 <img> 或 <video> 在其容器中的位置。

图像

看看下面这张来自武汉的图像，尺寸为 600x400 像素：

接下来，我们使用 object-fit: cover; 来保持宽高比并填充给定的尺寸。然而，图像将被裁剪以适应，如下所示：

实例

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

亲自试一试

使用 object-position 属性

假设显示的图像部分不是我们想要的位置。为了定位图像，我们将使用 object-position 属性。

在这里，我们将使用 object-position 属性来定位图像，使古老的建筑位于中心：

实例

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

亲自试一试

在这里，我们将使用 object-position 属性来定位图像，使著名的紫禁城角楼位于右侧：

实例

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

亲自试一试

CSS object-* 属性

下表列出了 CSS object-* 属性：