JavaScriptでやったり、overflowを使用したりして冗長なコードを書かなければならなかったけれど
cssで画像の縦横比を保ちつつトリミングすることができるようになりました。
以下のコードを実行するといけます

img {
  width: 250px;
  height: 250px;
  object-fit: cover;
}

このObject-fitが何をしているのか？背景画像の大きさを指定するbackground-sizeプロパティをイメージすると理解しやすいです。
object-fitプロパティの値には以下のようなものがあります。

値	意味
fill	初期値。コンテンツは要素全体を埋めるサイズになる。したがって、縦横比が保たれないケースがある
contain	コンテンツは要素内に合うサイズになり、縦横比は維持され要素内に収まる。コンテンツは歪まずに済む。
cover	コンテンツが元々の縦横比を保ちながら、要素内を完全に覆うように可変。コンテンツの幅と高さの短いものが要素にフィットし、長いものはその要素からはみ出る
none	コンテンツは要素の幅や高さを無視
scale-down	コンテンツを元のサイズで表示しますが、必要に応じて.object-scale-downを使用して、コンテナーに合うように要素を縮小します。