画像の比率が違くて画像が潰れてしまう

縦長や横長の画像を表示させようとして画像が潰れてしまったことはありませんか？

item.css

img {
  width: 300px;
  height: 300px;
}

一番左の画像が比率の関係で横につぶされしまっていますね。

1行追加するだけで中央でトリミングされた表示にできる

object-fit: cover;を追加するだけでいい感じに表示を変えてくれる

item.css

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

1行追加しただけなのにちゃんと潰れないように表示してくれるようになりましたね。