object-fit

背景・装飾

画像や動画などの置換要素がコンテナにどのようにフィットするかを制御するプロパティです。

構文

Syntax
object-fit: fill | contain | cover | none | scale-down

コード例

例 1

object-fit: cover;
実行結果
object-fit: cover - アスペクト比を保ちながらコンテナを完全に埋める
元画像 (横長)
400×200px
→
正方形コンテナ
cover
100×100px
💡 上下がカットされて正方形に収まる。ヒーロー画像によく使用

アスペクト比を保ちながらコンテナを埋める

例 2

object-fit: contain;
実行結果
object-fit: contain - アスペクト比を保ちながら全体を表示
元画像 (横長)
400×200px
→
正方形コンテナ
contain
100×100px
💡 上下に余白ができるが全体が表示される。ロゴや重要な画像に適用

アスペクト比を保ちながらコンテナに収める

例 3

object-fit: fill;
実行結果
object-fit: fill - アスペクト比を無視してコンテナに合わせる
元画像 (横長)
400×200px
→
正方形コンテナ
fill
100×100px
⚠️ 縦に圧縮されて歪む。通常は使用しない

アスペクト比を無視してコンテナに合わせる（歪む可能性あり）

例 4

object-fit: none;
実行結果
object-fit: none - 元のサイズのまま（中央に配置）
元画像 (横長)
400×200px
→
正方形コンテナ
none
100×100px
💡 元サイズのまま中央配置。はみ出し部分がカットされる

元のサイズのまま表示（はみ出し部分はカット）

例 5

object-fit: scale-down;
実行結果
object-fit: scale-down - containとnoneの小さい方を選択
元画像 (小さい)
60×40px
→
大きいコンテナ
scale-down
100×100px
💡 画像が小さい場合は元サイズ、大きい場合はcontainと同じ動作

containとnoneのうち、結果的に小さくなる方を適用

💡 TIPS

レスポンシブ画像の必須プロパティ。aspect-ratioと組み合わせると強力。

関連プロパティ

ブラウザサポート

Chrome 32+, Firefox 36+, Safari 10+