headerの高さを取得してMV画像を画面いっぱいに広げる方法

【PR】この記事には広告を含む場合があります

Web制作において、MV画像を画面いっぱいに広げたいことはよくあります。

MV画像だけなら良いのですが、MV画像の上にヘッダー要素があると、高さが合わなくなることがあるのではないでしょうか。

多くの場合は、ヘッダーの高さを引いた値をMVの高さにすればOKです。

しかし、僕が使っているSnowMonkeyでは、ヘッダーの高さが可変となっているため、上手くいきません。

そこで、JavaScriptでヘッダーの高さを取得して、MVの高さに反映させて、自動的にMVの高さを画面いっぱいに広げるプログラムを作りました。

<header class="header">ヘッダーです</header>
<div id="keyvisual">
<img src="★画像のURL">
</div>
#keyvisual {
  width: 100%;
}

#keyvisual img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}
const myFunc = () => {
    let elem = document.getElementById("keyvisual");
    let wh = window.innerHeight;
    let headerh =  document.getElementsByClassName('header');
    wh = wh - headerh[0].clientHeight;
    elem.style.height = wh + "px";
};

window.addEventListener("DOMContentLoaded", myFunc, false);

以上です。

目次