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

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

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

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

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

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

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

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

参考

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー