CSSの”100vh”でも出来るんだけど、ブラウザ対応が気になる。。。
今流行のサイトのファーストビューを画面いっぱいに画像や動画を表示する方法。
cssでもできるんですが、お客様によっては古いブラウザを使用していたりして、height:100vh;で記載しても表示崩れがあることが多々ありました。
一番確実な方法はjQueryで画面の高さを取得して、要素に代入すること
ブラウザによっても高さが違うので、cssで指定せずにブラウザの高さJavaScriptで取得して画像のheightを指定してあげる方法です。
まずはjQueryを取得します。そのあとに下記のコードを挿入。
jsファイルに記載
$(document).ready(function() {
hsize = $(window).height();
$("ここに画像をバックグラウンドに指定した要素").css("height", hsize + "px");
});
画像をbackground-imageで指定した要素の高さを上記に指定。
後は自動で高さ取得して調整してくれます。