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

object-fit

{ object-fit オブジェクト・フィット : 表示方法; }

object-fitプロパティは、画像などの要素をボックスにフィットさせる方法を指定します。HTMLのimg要素video要素iframe要素など、置換要素に適用できます。

初期値 fill
継承 なし
適用される要素 置換要素
モジュール Image Values and Replaced Content Module Level 3

値の指定方法

表示方法

fill 要素の縦横比とサイズが調整され、ボックスを完全に埋めるように表示されます。
contain 要素の縦横比を保ったまま、ボックスに要素全体が収まるサイズに調整されて表示されます。要素の幅と高さのうち、長いほうだけがボックスにフィットします。
cover 要素の縦横比を保ったまま、ボックスを完全に埋めるサイズに調整されて表示されます。要素の幅と高さのうち、短いほうがボックスにフィットし、長いほうははみ出します。
none サイズは調整されず、そのまま表示されます。
scale-down noneまたはcontainを指定した場合の、要素が小さくなる方を適用します。

サンプルコード

img{
  background-color: #dcdcdc;
  width: 150px; height: 150px;
  object-fit: contain;
}
Google Chrome