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