metasliderの高さを100vhにする

Metasliderは手軽な設定でカスタマイズもしやすく、よく利用するWordpressのスライダープラグインのひとつです。ただ、幅と高さの指定単位は「px」に限定されています。

最近はファーストビューはスライダーの全画面表示も多いですね。そこで高さ100vhを使いたいケースがままあります。こんな時は下記でいけます。

#metaslider-id-固有のID {
	width: 100vw !important;
	height: 100vh !important;
	background: #fff;
}
#metaslider_container_固有のID img {
	object-fit: cover;
	height: 100vh;
}

ソース元はこちらです。オフィシャルですね。
https://www.metaslider.com/docs/full-screen-slider/

上記サイトのコードは、因みに全画面にしてfixedでスクロールしても背景のままの方法です。

#metaslider-固有のID {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100vw !important;
	height: 100vh !important;
	background: #fff;
}
#metaslider_container_固有のID img {
	object-fit: cover;
	height: 100vh;
}