Object-fit プロパティ

最終更新：2026-09-13

object-fit Object-fit プロパティ

object-fit プロパティは、<img> や <video> などの置換要素のコンテンツが、指定された幅と高さにどう収まるかを制御します。要素のアスペクト比がコンテンツと異なる場合、object-fit は引き伸ばすか、比率を保ったまま切り取るか、すべてを表示するかを決定します。レスポンシブな画像レイアウトに欠かせないツールです。

カテゴリ
初期値	fill
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

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

⚙️ 値

値	タイプ	説明
`fill \| contain \| cover \| none \| scale-down`	キーワード	置換要素のコンテンツの収め方

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
object-fit	✓ v30	✓ v12	✓ v36	✓ v9	✓ v16
すべての主要ブラウザーでサポート

ヒント： cover は最も一般的な値です。画像のアスペクト比を保ちながらコンテナを埋め、はみ出した部分を切り取ります。正方形のサムネイルに最適です。

ヒント： object-fit が効果を発揮するには、要素に明示的な幅と高さが必要です。幅か高さのどちらか一方だけを設定しても適合動作は発生しません。

❓ よくある質問

Qobject-fit と background-size の違いは何ですか？

Aobject-fit は img や video などの置換要素に適用され、コンテンツが要素のボックスにどう収まるかを制御します。画像はドキュメントフロー内に残り、SEO、alt テキスト、クローラーからも認識可能です。background-size は背景画像に適用され、純粋に装飾的なコンテンツに向いています。コンテンツ画像には img + object-fit を、装飾画像には background + background-size を使ってください。

Qobject-fit における scale-down と contain の違いは何ですか？

Acontain は画像を比率を保ってコンテナ全体に収めます。画像がコンテナより小さい場合は、比率を維持したまま拡大されて埋められます。scale-down は none（自然なサイズ）と contain のうち小さい方を選ぶため、小さな画像が拡大されることはありません。小さな画像には scale-down を使ってぼやけを防ぎ、大きな画像では通常両者は同じ結果になります。

Qobject-fit: cover で画像が切り取られるのはなぜですか？重要な部分を残すにはどうすればよいですか？

Acover は比率を保ちながらコンテナを埋めるため、アスペクト比が異なる場合は必ず余分な部分を切り取る必要があり、デフォルトでは中央領域が保持されます。重要なコンテンツ（顔、ロゴ）を残すには、object-position で切り取りの焦点を移動させます（object-position: top なら上部を保持）。また aspect-ratio を使ってコンテナの比率を画像に合わせれば、切り取りを完全に回避できます。

Q画像要素で object-fit が機能しないのはなぜですか？

A最も一般的な原因は、要素に確定した幅と高さがないことです。一方の方向だけを設定し、もう一方が auto の場合、置換要素は自身の比率で拡縮され、object-fit が収める対象がありません。また、それが置換要素（<img>、<video>、<iframe>、<embed>）であることを確認してください。普通の div 内のコンテンツは object-fit の制御を受けません。この 2 点を確認すればたいてい解決します。