要素内（矩形内）で画像のサイズを揃える方法はいくつもあるとおもいますが、縦長横長どちらの画像であっても、画像を均等なサイズにして要素内（矩形内）いっぱいに表示させる方法です。

ECサイトの商品画像表示など、画像を見せる場面で使っていきたいTips。

様々な異なるサイズの画像を均等なサイズで表示させる方法

ECサイトの商品一覧ページなど、商品画像を横並びにしてサイズを揃えて綺麗に見せたいときに。

親要素の背景画像として表示する

画像のサイズを変更するのではなくて、親要素の背景画像として指定します。

デモでは、いくつかのパターンをつくってみましたが、2番目の「background-size: cover; にした場合」が、画像を均等なサイズで表示させる方法になります。

以下が、そのHTMLとCSSになります。

これで、大きな縦長画像や横長画像などのいろいろなサイズの画像であっても均等なサイズで表示させることができます。

最後の[object-fit]プロパティについては、表示領域に対しての画像の大きさを変更する場合になります。また、現在モダンブラウザにしか対応していません。

デモを見ていただければわかるのですが、画像のサイズを変更した場合と背景として設定した場合では見え方が違ってきます。
どのように画像を見せていくのかによって方法は変わってくるかと思いますが、ちょっと頭の隅に入れておきたいTipsのご紹介でした。