【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);
}

サンプル

コメント

タイトルとURLをコピーしました