object-fit プロパティは、画像やビデオなどの置換要素をコンテナ内でどのように表示するかを制御するプロパティです。画像は通常、意識して揃えない限りサイズやアスペクト比が異なるため、意図したとおりに表示されないことがあります。object-fit プロパティを使用することで、以下のような表示方法を選択できます。
①fill
画像のアスペクト比を無視し、コンテナ全体を埋めます。
②contain
アスペクト比を保持しながら、画像全体がコンテナ内に収まるようにスケーリグし ます。コンテナ内に余白ができる場合があります。
③cover
アスペクト比を保持しながら、コンテナを完全に覆うようにスケーリングします。一部が切り取られる場合があります。
④none
画像のサイズ変更を行わず、元のサイズを保持します。コンテナからはみ出すことがあります。
⑤scale-down:none または contain のうち、画像が小さく表示される方を使用します。
全ての画像のサイズをトリミングなどで揃えない限りサイズの違う画像を縦、横揃えて綺麗に表示するには何かを妥協する必要があります。
では、どれを選べばいいかですが、もちろんデザインや案件によって変わってきますが私の感覚では③のobject-fit: cover;が多いような気がします。
coverは、画像の一部が切り取られることがありますが、アスペクト比を保持しながら、コンテナを完全に覆うようにスケーリングできるのでコンテナのサイズを統一できます。