kumitatepazuru's blog

中学生のメモブログ。みんなの役に立ちたい。

画像をアスペクト比を保ちながら最大表示【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");
}
})

そして、cssw-100width: 100%h-100height: 100%と書いておけば大丈夫。bootstrap使ってたら書かなくても大丈夫。