CSS3 object-fit プロパティ

CSS object-fit プロパティは、<img> や <video> といった置換要素（Replaced Elements）の内容を、指定されたコンテナのボックスにどのように適合させるかを指定するために使用されます。

1. CSS3 object-fit プロパティ

通常、画像に特定の幅（width）と高さ（height）を指定すると、そのアスペクト比（縦横比）が崩れ、画像が引き伸ばされたり押しつぶされたりすることがあります。object-fit プロパティを使用することで、画像を切り抜いたりリサイズしたりする方法をブラウザに指示し、アスペクト比を維持したまま美しくレイアウトすることが可能になります。

2. object-fit の主要な値

object-fit プロパティには、以下の 5 つの値を指定できます。

• fill: デフォルト値。アスペクト比を無視して、指定されたサイズに収まるように画像を引き伸ばします。
• contain: アスペクト比を維持したまま、画像がコンテナ内に完全に収まるようにリサイズされます。
• cover: アスペクト比を維持したまま、コンテナを完全に覆うようにリサイズされます。画像の一部が切り取られる場合があります。
• none: 画像はリサイズされません。
• scale-down: none または contain のうち、画像がより小さくなる方を適用します。

2.1 fill の使用例（デフォルト）

fill を指定すると、画像はコンテナの幅と高さに合わせて強制的に引き伸ばされます。

img {
  width: 200px;
  height: 400px;
  /* アスペクト比を無視して指定サイズにフィットさせる */
  object-fit: fill;
}

2.2 contain の使用例

contain を指定すると、画像全体が表示されることを優先し、アスペクト比を保ったままリサイズされます。コンテナ内に余白が生じることがあります。

img {
  width: 200px;
  height: 400px;
  /* アスペクト比を維持し、コンテナ内に収める */
  object-fit: contain;
}

2.3 cover の使用例

cover は、モダンな UI デザインで最も頻繁に使用される設定です。アスペクト比を維持しながら、コンテナを隙間なく埋めます。

img {
  width: 200px;
  height: 400px;
  /* アスペクト比を維持し、コンテナを完全に覆う（はみ出しはトリミングされる） */
  object-fit: cover;
}

2.4 none の使用例

none を指定すると、画像は本来のサイズ（Intrinsic Size）を維持し、リサイズされません。

img {
  width: 200px;
  height: 400px;
  /* リサイズせず、元のサイズのまま表示する */
  object-fit: none;
}

2.5 scale-down の使用例

scale-down は、画像の元のサイズと contain を適用した結果を比較し、最終的なサイズが小さくなる方を採用します。

img {
  width: 200px;
  height: 400px;
  /* none か contain のうち、より小さい方を自動選択 */
  object-fit: scale-down;
}

3. object-position プロパティとの組み合わせ

object-fit で画像をトリミング（切り抜き）する場合、デフォルトでは画像の中央が基準となりますが、object-position プロパティを使用することで、表示する位置を調整できます。

3.1 位置調整の実装例

以下の例では、画像を右下の角に合わせて配置します。

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
  /* 画像の右下を基準に配置 */
  object-position: 100% 100%;
}

4. プロパティ一覧

object-fit: cover は、特にサムネイル画像の一覧や背景ビデオの実装において、デザインの整合性を保つための強力な武器となります。ブラウザのサポートも非常に安定しているため、従来の background-image に頼っていたレイアウトを、セマンティックな <img> タグへと置き換える際にも積極的に活用すべきプロパティです。