レスポンシブでヒーローヘッダーなど画像を画面や要素いっぱいに表示させるにはさまざまな方法があります。
Webデザイナー初級～中級者向けにまとめました。
img要素で表示する場合
説明用のサンプル画像として以下の柴犬の画像を使用します。
まずは説明がわかりやすいようにimg要素を囲うのグレー背景の親要素を設置します。
<div class="parent">
</div>親要素の100%
最も簡単な方法はimg要素で画像を表示し、widthとheightを100%にすることです。
HTMLのimg要素に属性width, heightを直接指定しても、cssでimg要素にwidth: 100%; height: 100%;と記述しても構いません。
しかし親要素の縦横比(今回は1:1)と画像の縦横比(今回は16:9)が違う場合以下のようになることがあります。
<div class="parent">
<img src="https://blog.bytedesign.net/wp-content/uploads/2022/04/shiba_1920x1080-1024x576.jpg" alt="柴犬">
</div>.parent {
width: 200px;
height: 200px;
background-color: #ccc;
}
.parent img {
width: 100%;
height: 100%;
}img要素にwidthとheightに100%を指定しているので親要素(.parent)の幅と高さを継承しimg要素の幅と高さも375pxとなります。
そのため画像の縦横比は1:1となり、画像が縦につぶれて変形してしまいます。
では親要素の縦横比を3:1に変更するとどうなるでしょうか?
.parent {
width: 200px;
height: 600px; //幅の3倍の高さ
background-color: #ccc;
}
.parent img {
width: 100%;
height: 100%;
}画像のアスペクト比が3:1となり、今度は画像が横につぶれて変形してしまいました。
今回は横長16:9の柴犬の画像を使用していますが縦横比が逆の縦長9:16の画像を使用してもやはり変形されてしまいます。
object-fitプロパティ
親要素の縦横比は1:1に戻し、imgにwidth: 100%; height: 100%;を指定せずにobject-fit: contain;を試してみましょう。
<div class="parent">
<img src="https://blog.bytedesign.net/wp-content/uploads/2022/04/shiba_1920x1080-1024x576.jpg" alt="柴犬">
</div>.parent {
width: 200px;
height: 200px;
background-color: #ccc;
}
.parent img {
object-fit: contain;
}縦横比は維持したままimgの高さは親要素を継承し、幅は継承されず親要素をはみ出してしまいました。
object-fit: cover; object-fit: fill;でも同様の結果となります。
backgroundプロパティ(CSS)で表示する場合
まずはbackground-imageプロパティで縦横比1:1要素に背景をセットします。
また状況ががわかりやすいように引き続きグレー背景をセットした.parentクラスの親要素も設置します。
<div class="parent">
<div class="area_img">
</div>
</div>.area_img {
width: 200px;
height: 200px;
background-image: url("https://blog.bytedesign.net/wp-content/uploads/2022/04/shiba_1920x1080-1024x576.jpg");
background-repeat: none;
}背景のサイズは指定していないので背景が見切れています。
background-sizeプロパティ
さきほどのCSSにbackground-size: cover;を追加します。
<div class="parent">
<div class="area_img">
</div>
</div>.area_img {
width: 200px;
height: 200px;
background-image: url("https://blog.bytedesign.net/wp-content/uploads/2022/04/shiba_1920x1080-1024x576.jpg");
background-repeat: no-repeat;
background-size: cover;
}背景画像の高さは要素にぴったりと合いましたが画像の位置は左寄せのため右側が見切れています。
さらにbackground-position: center;を追加することで背景画像の中央に配置することもできますが今度は画像の左右が見切れてしまいます。
続いてbackground-size: cover; からbackground-size: contain;に変更します。
<div class="parent">
<div class="area_img">
</div>
</div>.area_img {
width: 200px;
height: 200px;
background-image: url("https://blog.bytedesign.net/wp-content/uploads/2022/04/shiba_1920x1080-1024x576.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}要素内に背景画像はフィットし、縦横比も維持されていますが上下に余白(グレー部分)が生じています。
また、9:16の縦の画像の場合は左右に余白が生じます。
まとめ
img要素で表示するかbackgroudプロパティで表示するか、いずれにせよ親要素と画像の縦横比が異なる場合は
- 親要素の上下または左右に余白が生じる
- 親要素のサイズで画像の上下または左右がトリミングされる(見切れる)
- 親要素から画像がはみ出す(overflowプロパティではみ出した場合の挙動をコントロール)
- 画像の縦横比を変更する(画像を縦か横につぶす)
これからのいずれかを許容しなければなりません。
レスポンシブデザインにおいて基本的に要素のサイズ(縦横比)は固定しませんのでこれらのことを念頭にしたデザインの画像を用意することが重要です。