ファーストビューの画像の高さを自動取得して画面いっぱいに表示するjs

CSSの”100vh”でも出来るんだけど、ブラウザ対応が気になる。。。

今流行のサイトのファーストビューを画面いっぱいに画像や動画を表示する方法。

cssでもできるんですが、お客様によっては古いブラウザを使用していたりして、height:100vh;で記載しても表示崩れがあることが多々ありました。

ブラウザによっても高さが違うので、cssで指定せずにブラウザの高さJavaScriptで取得して画像のheightを指定してあげる方法です。

まずはjQueryを取得します。そのあとに下記のコードを挿入。

$(document).ready(function() {
    hsize = $(window).height();
     $("ここに画像をバックグラウンドに指定した要素").css("height", hsize + "px");
});

$(document).ready(function() {

hsize = $(window).height();

$("ここに画像をバックグラウンドに指定した要素").css("height", hsize + "px");

});

画像をbackground-imageで指定した要素の高さを上記に指定。
後は自動で高さ取得して調整してくれます。

最新情報をチェックしよう！