CSSで画像を画面いっぱいに表示する方法
デバイスの画面サイズにあわせ、画面いっぱいに画像を表示する方法を紹介します。
ファーストビューで魅力的な画像を画面全体に表示させるなどで、ユーザーにインパクトを与える効果が期待できます。
サンプルコード
<body>
<div class="block1">
<img src="img1.jpg" class="img1">
</div>
<div class="block2">
<div>
<body>
css（通常）と結果
まずは通常のcssです。一般的に画像を表示しようとした場合、<img src="">で画像を指定します。
その方法で表示する場合のcssと結果です。
.block1{
}
.img1{
width:100%;
}
.block2{
height:100%;
}
書くほどもないcssですが、画像を画面横幅に合わせ、レスポンシブに可変させているだけです。結果をフレームで表示しているので分かりにくいですが、通常のサイズだと横幅だけ可変するため、heightに合わせて縦が見切れたり、逆に高さが足りなかったりします。
画面いっぱいに表示させる方法
では今回のテーマである、高さもちょうどに画面いっぱいに画像を表示させる方法を説明します。
その方法はbackground-imageとheight:100vhを使用します。
そのためには、まずhtmlのコードからblock1にあった<img src=>を削除します。
<body>
<div class="block1">
</div>
<div class="block2">
<div>
<body>
cssと結果
.block1{
height:100vh;
background-image:url(img1.jpg); /*背景に表示したい画像*/
background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
background-position:center; /*画像の真ん中を起点として表示させる*/
}
.block2{
height:100%;
}
先ほどの結果と比べると、画像が画面いっぱいに表示され、その下にblock2が表示されているのが分かると思います。
また高さを画面サイズに合わせているのにも関わらず、画面比率がおかしくなることもなく画面に収まっています。
おまけ（黒フィルタかけ、文字のせ）
おまけで画像に黒いフィルタをかけ、そのうえに文字をのせてみます。スタイリッシュさがでて、カッコイイですよね。ちなみに文字を和訳すると面白いことが・・・。
<body>
<div class="block1">
<div class="block1_inner">
<p>Don't worry about what happens if you go this way.
There is no way if you are in danger. If you step forward,
that pair becomes the road, and that pair becomes the road.
Don't hesitate to go. You can see it if you go.</p>
</div>
</div>
<div class="block2">
<div>
<body>
.block1{
height:100vh;
background-image:url(img1.jpg);
background-size:cover;
background-position:center;
}
.block1_inner{
height:100%;
background:rgba(0,0,0,0.5);
padding:0 10px;
display:flex;
align-items: center;
justify-content: center;
}
.block1_inner p{
color:#fff;
font-size:3.0em;
}
.block2{
height:100%;
}
@media screen and (max-width:768px){
.block1_inner p{
font-size:1.8em;
}
}
注意点
background-imageで画像を表示すると、googleに画像として認識されないため、SEO面で不利になる可能性があります。
SEOを重視するのであればbackground-imageでの表示は避けて、設定は少しややこしくなりますが、通常の画像として表示させることをおすすめします。
