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);以上です。
