サイト上で複数の画像を並べて表示させる際に、縦と横の比率が全く同じ写真同士であれば、決まったサイズなので綺麗に表示させることが可能なのですが、一方は縦に長い、一方は横に長いといった写真を扱うことって当たり前にありますよね。
その際、一覧で並べている写真がデコボコできれいに並ばず見た目が悪くなってしまいます。
そんな時に便利なのどがこの一行！
img {
width: 250px;
height: 250px;
object-fit: cover; /* ←この一行を追加します！！ */
}
今回の場合には、どんなサイズの画像が来ても縦横250pxの画像として表示させるという設定になります。
つまりは正方形ですね。
縦に1000pxあろうが、横に500pxあっても自動でトリミングして、250pxの正方形で画像も歪むことなく綺麗に表示できます！
 |
0 件のコメント:
コメントを投稿