【vh】画像を表示領域に収まるように表示させる/フルスクリーンコンテンツ

フルスクリーンで画像表示

最近のWebサイトではフルスクリーンでメインビジュアルや画像などを表示させることも多いと思います。

フルスクリーンだと画面に収まるサイズで画像を表示させたいという場合があると思いますがそんなときに使いたいのが「vh」という単位です。

「vh」は「viewport height」の略になります。

vhはデバイスの表示領域（viewport）の高さに対しての割合を指定することができます。

html

<div class="main"><div></div></div>

css

.main div{
	width: 100%;
	height: 100vh;
	background-position: center center;

	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	background-image: url(img/img.jpg);
}

サンプル