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-* 屬性：