object-fitとは？

object-fit は、画像や動画を「枠の中にどう収めるか」を決めるCSSです。

例えば：

<img src="sample.jpg" />

に対して使います。

img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

contain

object-fit: contain;

特徴

• 画像全体を表示する
• 枠からはみ出さない
• 余白ができることがある

向いているもの

• アイコン
• ロゴ
• 全体を見せたい画像

イメージ

「画像全体を優先して収める」

cover

object-fit: cover;

特徴

• 枠いっぱいに画像を広げる
• 余白ができない
• 一部が切れることがある

向いているもの

• サムネイル
• カード画像
• バナー

イメージ

「見切れてもいいから枠を埋める」

fill

object-fit: fill;

特徴

• 枠サイズに無理やり合わせる
• 画像が伸びたり潰れたりする

これはあまり使いません。

none

object-fit: none;

特徴

• 元サイズを維持
• はみ出すことがある

特殊なケース向けです。

contain と cover の違い

• contain

  • 全体を表示
  • 余白あり
  • 切れない

• cover

  • 枠いっぱい
  • 余白なし
  • 一部切れる

実際の使い方

アイコン

.icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

アイコン全体を綺麗に表示したいとき。

カード画像

.cardImage {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

一覧カードなどでよく使います。

丸いプロフィール画像

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
}