padding-top: ~%とobject-fit: coverで縦長・横長どちらの画像も決まったアスペクト比で切り取る

See the Pen padding-top: ~%とobject-fit:coverの併せ技 by 熊瀬川直也 (@momonoki1990) on CodePen.

object-fit: cover コンテナーに余白が出ないよう縦横比を維持しつつ、全体を覆うようにフィットさせ縦横中央に配置します。コンテナーからはみ出る部分はトリミングします。
【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー

→縦長の画像であればアスペクト比を保ったまま枠の横の長さに併せて画像を縮小し、縦のはみ出した部分を切り取り、横長の画像であればその逆のようなイメージでトリミングが行われる

・widthとheightを指定しないとトリミングは行われない。