CSS Reference

object-fit

画像などをボックスにフィットさせる方法を指定する

object-fit プロパティは、置換要素（img 要素や video 要素など）のコンテンツを、その要素の指定された幅と高さのボックス（コンテンツボックス）にどのように収める（フィットさせるか）かを指定します。

指定できる値は下記の通りです。

fill コンテンツボックス全体を埋めるように置換コンテンツのサイズを変更します。この場合、アスペクト比（幅と高さの比率）は維持されず、コンテンツボックスの使用幅と使用高さがそのまま置換コンテンツのサイズになります。（既定値）
例えば、画像を fill で表示すると、画像のアスペクト比が崩れる可能性がありますが、コンテンツボックス全体が画像で埋まります。
contain 置換コンテンツは、アスペクト比（幅と高さの比率）を維持しながら、コンテンツボックス内に収まるようにサイズ変更されます。この場合、元の置換コンテンツが収まる最小のサイズに調整され、余白が発生することがあります。
例えば、画像がボックスのサイズに対して横長である場合、画像の縦横比を維持しながらボックスに収めるため、縦方向に余白ができます。
cover 置換コンテンツがアスペクト比を維持しながら、コンテンツボックス全体を埋めるようにサイズ変更されます。置換コンテンツの一部が隠れる可能性がありますが、コンテンツボックス全体をカバーします。
例えば、画像がボックスに対して縦長の場合、縦方向はボックスいっぱいに表示されます。横方向は、はみ出して一部が隠れることがありますが、ボックス全体は画像で覆われます。
none 置換コンテンツはサイズ変更されず、元のサイズのまま表示されます。コンテンツボックスに収まりきらない場合、ボックスの外にはみ出した部分は見えなくなります。
scale-down none と contain のうち、置換コンテンツのサイズが小さくなる方を適用します。
例えば、置換コンテンツが none で表示されるときのサイズより contain の方が小さく収まる場合は、contain が適用されます。

object-fitの仕様

初期値
  • fill
対象となる要素
  • 置換要素
継承
  • なし

object-fitのサンプルソース

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

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome