異なる画像サイズを一定サイズのカードで表示したい。元画像をそのまま指定したheight, widthで表示した場合、縦長、横長の画像は圧縮されてしまう。どうしたら良いか。
昔、先輩に教わったのだが、システムでは表示する際にデータを装飾することはあっても、基本的に元データそのものを加工・変更してはいけない。
ということで、表示を揃えるためにアップロードした画像をサーバーサイド側で切り抜くのは気が引けていた。
少し調べたら、CSSのobject-fitでアスペクト比を維持したまま処理できるらしい。
contain: アスペクト比を維持したままボックスに収まるよう拡大縮小
cover: アスペクト比を維持したまま、コンテンツボックスを埋めるよう拡大縮小
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <! DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Document</ title > < style > .contain img { width: 200px; height: 150px; object-fit: contain; } .cover img { width: 200px; height: 150px; object-fit: cover; } .fill img { width: 200px; height: 150px; object-fit: fill; } </ style > </ head > < body > < div class = "contain" > < img src = "img/bridge1.jpg" >< br > < img src = "img/bridge2.jpg" > </ div > < br > < div class = "cover" > < img src = "img/bridge1.jpg" >< br > < img src = "img/bridge2.jpg" > </ div > < br > < div class = "fill" > < img src = "img/bridge1.jpg" >< br > < img src = "img/bridge2.jpg" > </ div > < script > </ script > </ body > </ html > |
coverだと、画像が切れる恐れがあるから、containが一番しっくり来るな。