ファーストビュー画像・要素をウィンドウの高さに合わせる方法【JavaScript・CSS】

今回は、ファーストビューの画像（要素）をウィンドウの高さににピッタリ合わせる方法を紹介します。

まずはデモページをご覧ください。

DEMO

とてもよく使われるレイアウトですね。ファーストビューにインパクトのある画像を使用したい・見せたい画像がある時に効果的です。

それでは実装方法を解説していきます。

ファーストビューの画像をウィンドウの高さに合わせるコード

結構簡単なコードで実装できます。

HTML

<div class="main-visual" id="js-main-visual"></div>

スタイル用にclassを、JavaScript用にidを記述するだけです。

CSS

.main-visual {
  background-image: url(./img/main-visual.jpg);
  background-size: cover;
  height: 100vh;
}

background-sizeをカバーにしておけば、どの比率になっても隙間ができません。

100vhは、ウィンドウの高さに対して100%という意味です。

height: 100vhを指定すれば、要素がウィンドウサイズピッタリになります。

これでほぼ完成なのですが、スマホだとアドレスバーや下部メニューがあるためピッタリになりません。

この問題は、JavaScriptを使って解決します。

JavaScript

function imageJustSize() {
  var mainVisual = document.getElementById('js-main-visual');
  var winH = window.innerHeight;
  mainVisual.style.height = winH + 'px';
}

imageJustSize();

window.addEventListener('resize', imageJustSize);

window.Heightを使えば、ウィンドウの内側のサイズを取得することができます。

サイズは数値なので、pxを付けてあげる必要があります。

window.addEventListener('resize', imageJustSize);

この部分は、ウィンドウがリサイズされたり、スマホの横向きに切り替えた時のための記述です。

意外と簡単に実装できたのではないでしょうか。

もう一度デモを載せておきます。

DEMO

ウィンドウのサイズを変えても、画像の高さはウィンドウの高さピッタリになっています。

よく使うテクニックなので、覚えておきましょう！