IEに対応しなくてよいのであれば、object-fitを使えば実現できます。
object-fitで指定できる値は4つあって、デフォルトはfillです。
contain
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。
cover
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
fill
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
none
置換コンテンツは、拡大縮小されません。
scale-down
コンテンツは none 又は contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit より引用
background-sizeに指定できるキーワードは、containとcoverだけ（%やpxで数値も渡せますが）なので、なんならbackground-sizeよりもリッチと言っても良いでしょう。
特に、scale-downは便利で、「contain的に表示したいけど、オリジナルサイズより大きく表示したくない」というときに使えます。これはbackground-size単独では再現できない挙動です。（max-widthやmax-heightを併用すれば似たような挙動は再現できそうですが、画像サイズを知らない状態では同じ挙動になりません）
最近は「IEは非対応で良いよ」というケースが増えてきたので、こういう便利なCSSが使えて嬉しいです。
