ウインドウの幅に合わせて伸縮する画像表示を設定する

画像を大きく見せる

トップページなどに掲載するメインビジュアルのような大きく表示する画像は、表示幅によって表示するサイズを調整する必要があります。
今回はbackground-sizeプロパティの「cover」を使って幅いっぱいに表示する方法を解説します。

表示幅が狭まっても、画像の高さはある程度保持するようにします。

HTMLのコード例

<div class="main_visual">
	<header><img src="./images/logo.svg" alt="GRAY CODE"></header>
</div>

CSSのコード例

.main_visual {
	background: #f2d6aa;
}
header {
	margin: 0 auto;
	padding-top: 50px;
	text-align: center;
	height: 600px;
	background: #f7f7f7 url(./images/pic.jpg) center top/cover no-repeat;
}
header img {
	width: 150px;
}

header要素に対し、背景画像「pic.jpg」を中央位置で表示しつつ、画像の表示サイズを「cover」で調整しています。

画像の表示する高さを決めるheightプロパティも重要です。
高さが指定されていると、基本的にはその高さが維持された状態で背景画像も表示されます。
今回は適当な高さとして「600px」を指定していますが、使い勝手を考慮するとJavaScriptと組み合わせて、ページ読み込みのタイミングでheightプロパティへ値を動的に設定する方法が便利です。

なお、背景画像に関する指定はbackgroundプロパティで一括で行なっていますが、次のようにバラバラに指定することもできます。

CSSのコード例

.main_visual {
	background: #f2d6aa;
}
header {
	margin: 0 auto;
	padding-top: 50px;
	text-align: center;
	height: 600px;
	background-color: #f7f7f7;
	background-image: url(./images/pic.jpg);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}
header img {
	width: 150px;
}

画像が劣化しないよう表示の最大幅を指定する

background-sizeプロパティで「cover」を指定すると画像が自動的に伸縮されて便利ですが、画像の元サイズよりも拡大すると劣化してしまいます。
そこで、要素の最大幅をmax-widthプロパティで指定して画像の劣化を防ぎます。

コード例

.main_visual {
	background: #f2d6aa;
}
header {
	margin: 0 auto;
	padding-top: 50px;
	text-align: center;
	max-width: 1600px;
	height: 600px;
	background-color: #f7f7f7;
	background-image: url(./images/pic.jpg);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}
header img {
	width: 150px;
}

表示幅がmax-widthプロパティに達したら、画像はそれ以上拡大されず左右は余白になります。