画像のトリミングを行う、object-fit をご紹介いたします。
object-fit なし
<img>タグに、width:100%; height:100%; を指定しております。
object-fit: contain;
縦横比を保持し、ボックスに収まるようにリサイズされます。幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。
object-fit: cover; （これが一番使い勝手がよさそうです。）
縦横比を保持してボックスを完全に覆うようリサイズされます。
object-fit: fill;
ボックス内を満たすように縦横比を変えながらリサイズされます。
imgにwidth:100%; height:100%; 指定していれば、none と変わり映えしないですね(^_^;)
object-fit: scale-down;
none と contain のうち、小さい方のサイズに合わせて表示します。
正直、contain がほぼ適用されてしまうので、あまり覚えておかなくてもよいかもしれません。