画像をアスペクト比を保ちながら最大表示【javascript】
htmlで画像を画面いっぱい(要素いっぱい)表示させたいときがある。でも、width: 100%
とかcssに書くと高さが画面外に行ってしまうときがある。だから、height: 100%
とすると横が画面外にいってしまう。なので、画像の大きさによって切り替わるシステムを作ってみた。jqueryが必要。
$("#img_d").bind("load", function () { if ($(this).width() * ($(this).parent().height() / $(this).height()) > $(this).parent().width()) { $(this).addClass("w-100"); } else { $(this).addClass("h-100"); } })
そして、cssでw-100
にwidth: 100%
、h-100
にheight: 100%
と書いておけば大丈夫。bootstrap使ってたら書かなくても大丈夫。