Div要素の背景画像をいっぱいに表示するCSS記述

DivやPの背景画像を設定すると高さがうまく収まらない。

 使用するのは下の桜の画像。横500×縦300ピクセルのJPEG画像です。

 この画像を背景に設定して画像をぴったり表示させていきます。

Width:100%設定のみ

 Divの幅を100%で背景画像を表示した場合。

■CSSの記述
width:100%;
background-image:url(背景画像.jpg);
background-repeat:no-repeat;

Width:100%;Height:100%設定

 Divの高さに100%を設定したもの。表示できる高さが少し増えました。

■CSSの記述
width:100%;
height:100%;
background-image:url(背景画像.jpg);
background-repeat:no-repeat;

Width:100%;Height:100%;padding:10px設定

■CSSの記述
width:100%;
height:100%;
background-image:url(背景画像.jpg);
background-repeat:no-repeat;

 heightで調節ではなく、paddingで調節する必要があります。

解決。
Width:100%;Height:100%;padding-bottom:60%;background-size:contain設定

■CSSの記述
max-width:500px;
width:100%;
margin:0;
height:0;
background-image:url(背景画像.jpg);
background-repeat:no-repeat;
padding-bottom:60%;
background-size:contain;

 これで画像の高さぴったり表示させることができました。

ポイントは、
height:0;指定と
padding-bottom:60%の指定。

 60%は、背景画像の高さ300px÷背景画像の幅500px=0.6×100でパーセント表示したもの。

background-size:contain;を最後に入れて完了です。

 今回は、表示例の都合上、max-width:500px;を入れていますが、Divの幅を画面一杯に使用しないと、padding-bottomで不自然な空白が空いてしまうのでご注意を。