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-* 属性が示されています：