今回は、ファーストビューの画像（要素）をウィンドウの高さににピッタリ合わせる方法を紹介します。
まずはデモページをご覧ください。
とてもよく使われるレイアウトですね。ファーストビューにインパクトのある画像を使用したい・見せたい画像がある時に効果的です。
それでは実装方法を解説していきます。
ファーストビューの画像をウィンドウの高さに合わせるコード
結構簡単なコードで実装できます。
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);この部分は、ウィンドウがリサイズされたり、スマホの横向きに切り替えた時のための記述です。
意外と簡単に実装できたのではないでしょうか。
もう一度デモを載せておきます。
ウィンドウのサイズを変えても、画像の高さはウィンドウの高さピッタリになっています。
よく使うテクニックなので、覚えておきましょう！
他にもこんな記事があります。
