CSS3 object-position プロパティ

Volardev 編集部 April 13, 2026

1. CSS3 object-position プロパティ

object-position プロパティは、object-fit プロパティと組み合わせて使用されます。これは、<img> や <video> 要素がそのコンテンツボックス（コンテナ）内でどのように配置されるかを指定するためのものです。

前セクションで学んだ object-fit は画像を「どのようにリサイズするか」を決定しますが、object-position はリサイズされた画像がコンテナ内の「どこに位置するか」を指定します。

2. object-position の動作と実装例

例えば、2つの同じ画像があり、どちらも width: 200px;、height: 400px;、さらに object-fit: cover; が適用されているとします。

通常、object-fit: cover; を指定すると画像は中央に配置されます。しかし、object-position を使用することで、表示したい特定の部分（例えば被写体の顔や重要なディテール）に焦点を合わせるように位置をずらすことができます。

2.1 コードスニペット：異なる位置指定

以下のコードは、画像をコンテナの特定の座標に配置する例です。

/* 左から 5px、上から 10% の位置に配置 */
.img1 {
  width: 200px;
  height: 400px;
  object-fit: cover;
  object-position: 5px 10%;
}

/* 中央下の位置に配置 */
.img2 {
  width: 200px;
  height: 400px;
  object-fit: cover;
  object-position: center bottom;
}

3. 指定方法のバリエーション

object-position プロパティの構文は、CSS の background-position プロパティと非常によく似ています。

キーワード指定: top, bottom, left, right, center を使用できます。
数値・パーセンテージ指定: px, em, % などの単位を使って、コンテナの左上端からの距離を指定します。

3.1 構文の例

/* 右端から 20px、下端から 10% の位置 */
object-position: right 20px bottom 10%;

/* 右下に固定 */
object-position: 100% 100%;

object-position をマスターすることで、アスペクト比が異なる多様なデバイス環境においても、画像の重要な情報を切り取ることなく最適な構図でユーザーに提示することが可能になります。特にヒーローイメージや、動的にコンテンツが生成されるカードレイアウトの実装において非常に重宝するプロパティです。