object-fit はimg,video要素を表示する際のはめ込み方を指定するスタイルになります。

通常imgタグはimgタグ、親要素のボックスにサイズを指定しない場合は表示する画像のサイズでそのまま表示されます。
サイズ指定した際に、width,heightを指定するとそのサイズまで縮小されて表示がされます。
どちらか片方を指定するとアスペクト比が維持された状態で指定したサイズまで縮小されます。
object-fit はその縮小方法などを指定します。

使い方

<div class="image-container">
  <img src="./example.png" />
</div>

.image-container {
  img {
    width: 100px;
    height: 100px;
    object-fit: cover;
  }
}

上記の記述を行うをwidth,heightがそれぞれ100pxのboxになります。
画像が縦長の場合は上下が100pxまで切り取られます。
画像が横長の場合は左右が100pxまで切り取られます。

使いみち

アスペクト比の異なる画像を同じサイズのboxで縮小させずに表示したい場合

アスペクト比は決まっているが、特定のサイズでトリミングして表示したい場合

対応ブラウザ

IEが対応しておりませんが、以下の記述で対応が可能です。

font-family: 'object-fit: contain;'