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

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

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

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

一番確実な方法はjQueryで画面の高さを取得して、要素に代入すること

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

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

jsファイルに記載

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

投稿者:気まぐれWEBLOG管理人