object-fitとは

img要素やvideo要素などの中身を、コンテナーにどのように表示するかを設定するプロパティです。
よく「画像をトリミングする方法」などとして紹介されています。

対応状況

https://caniuse.com/#feat=object-fit
IEでは使用できませんが、さすがにIEは無視して良いかと思います。

いつ使う？

個人的に一番よく使用するのが、サムネイルの形状を一致させるデザインの時です。
後はスライダーなどで、画面サイズによってスライダー自身のサイズを変えている場合などです。

実装

プロパティ

contain

コンテンツのアスペクト比（長辺と短辺の比率）を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。
要素のアスペクト比とコンテンツボックスのアスペクト比が合わない場合は、レターボックス表示(上下左右に余白ありの表示)になります。

cover

コンテンツのアスペクト比を維持したまま、コンテンツボックス全体を埋めるように拡大縮小します。
コンテンツのアスペクト比とコンテンツボックスのアスペクト比と合わない場合は、拡大されます.
トリミングで紹介される場合、このcoverの例になっています。

fill

初期値です。
コンテンツはコンテンツボックス全体を埋めるように拡大縮小します。

none

コンテンツの拡大縮小をしません。

scale-down

コンテンツは、noneやcontainを指定したようにサイズが設定され、コンテンツの実際のサイズが小さい方が採用されます。

実装例

See the Pen object-fit Sample by H.N (@H_Naito) on CodePen.

参考

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
https://liginc.co.jp/463976
https://www.webcreatorbox.com/tech/object-fit