画像の比率が違くて画像が潰れてしまう
縦長や横長の画像を表示させようとして画像が潰れてしまったことはありませんか?
item.css
img{width:300px;height:300px;}
Image may be NSFW.
Clik here to view.
一番左の画像が比率の関係で横につぶされしまっていますね。
1行追加するだけで中央でトリミングされた表示にできる
object-fit: cover;
を追加するだけでいい感じに表示を変えてくれる
item.css
img{width:300px;height:300px;object-fit:cover;}
Image may be NSFW.
Clik here to view.
1行追加しただけなのにちゃんと潰れないように表示してくれるようになりましたね。