{ 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