object-fit を理解すると「画像・動画が枠にきれいに収まる」デザインが作れる
object-fit は、画像や動画を「どのように枠に収めるか」をコントロールするプロパティです。
縦横比がバラバラな画像を並べるとき、サムネイルを整えるとき、カードの上部に画像を置くときなど、実務で非常に重要な役割を持ちます。
CSS と Tailwind CSS の両方で、初心者でも直感的に理解できるように解説します。
object-fit の基本
画像や動画が「枠より大きい／小さい」場合の表示方法を決める
代表的な値は次の5つです。
- cover：枠いっぱいに埋める（はみ出しOK・トリミングあり）
- contain：枠内に収める（余白あり・トリミングなし）
- fill：枠に引き伸ばす（縦横比が崩れる）
- none：元のサイズのまま（はみ出す可能性あり）
- scale-down：none と contain の小さい方
実務で最も使うのは cover と contain です。
cover：枠いっぱいに埋める（サムネイルの定番）
CSS版
.thumb {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
}
HTML
<img src="photo.jpg" class="thumb">
Tailwind版
<img src="photo.jpg" class="w-full h-52 object-cover rounded-lg">
特徴
- 枠いっぱいに表示される
- 画像の一部が切り取られる
- サムネイル・カードのヘッダー画像に最適
contain：枠内に収める（ロゴ・イラスト向け）
CSS版
.logo {
width: 200px;
height: 200px;
object-fit: contain;
background: #f0f0f0;
}
Tailwind版
<img src="logo.png" class="w-52 h-52 object-contain bg-gray-100">
特徴
- 画像全体が見える
- 余白ができる
- ロゴ・アイコン・イラストに最適
fill：枠に合わせて引き伸ばす（縦横比が崩れる）
CSS版
.stretch {
width: 200px;
height: 200px;
object-fit: fill;
}
Tailwind版
<img src="photo.jpg" class="w-52 h-52 object-fill">
特徴
- 枠に完全フィット
- 縦横比が崩れる
- 写真には不向き
none：元のサイズのまま（はみ出す可能性あり）
CSS版
.raw {
width: 200px;
height: 200px;
object-fit: none;
}
Tailwind版
<img src="photo.jpg" class="w-52 h-52 object-none">
特徴
- トリミングされる
- 元の画像サイズを優先
- ズーム効果を作りたいときに使える
scale-down：小さい方を採用（contain or none）
CSS版
.img {
width: 200px;
height: 200px;
object-fit: scale-down;
}
Tailwind版
<img src="photo.jpg" class="w-52 h-52 object-scale-down">
特徴
- contain と none の中で小さい方
- あまり使わないが、特殊な UI で便利
object-fit と相性が良いプロパティ
aspect-ratio と組み合わせると最強
.thumb {
aspect-ratio: 16 / 9;
object-fit: cover;
}
Tailwind
<img class="aspect-video object-cover">
比率を固定しつつ、画像を綺麗に収められるため、
カード・ギャラリー・サムネイルで大活躍。
width:100% + height:固定 で安定したサムネイル
.thumb {
width: 100%;
height: 200px;
object-fit: cover;
}
Tailwind
<img class="w-full h-52 object-cover">
実践例：カードの上部に画像を綺麗に配置
CSS版
.card-thumb {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 8px 8px 0 0;
}
Tailwind版
<img src="photo.jpg" class="w-full aspect-[4/3] object-cover rounded-t-lg">
カードの高さが揃い、レイアウトが美しく整う。
実践例：ロゴを枠内に収める（余白あり）
CSS版
.logo-box {
width: 150px;
height: 150px;
object-fit: contain;
background: #fff;
}
Tailwind版
<img src="logo.png" class="w-36 h-36 object-contain bg-white">
ロゴが切れずに綺麗に収まる。
object-fit の深掘りポイント
1. cover と contain の違いを理解するのが最重要
- cover → 枠いっぱいに埋める（トリミングあり）
- contain → 枠内に収める（余白あり）
この2つを使い分けるだけで、画像の扱いが劇的に上手くなる。
2. object-fit は「画像の縦横比を守る」ためのプロパティ
fill を除き、画像の縦横比は崩れない。
そのため、写真や動画の表示が自然になる。
3. object-position で表示位置も調整できる
object-position: center;
object-position: top;
object-position: left;
Tailwind
<img class="object-cover object-top">
トリミング位置を調整できるため、
人物写真などで顔が切れないようにできる。
まとめ
object-fit は、画像や動画を「枠にどう収めるか」を決めるプロパティで、
UI の美しさと安定性を大きく左右します。
- cover → サムネイル・カード向け
- contain → ロゴ・アイコン向け
- fill → 引き伸ばし
- none → 元サイズ優先
- scale-down → 小さい方
- Tailwind では object-cover / object-contain などを使う
- aspect-ratio と組み合わせると最強
