Edited at

background-imageを横幅100%で綺麗に可変表示させる(レスポンシブ、スマホサイト制作時とかに)

More than 1 year has passed since last update.

レスポンシブやスマホサイトを制作していて、

背景画像を可変対応させたい時があります。

みなさんどうやっているでしょうか。


sample


/* 例:幅640px高さ360pxの画像の場合 */

#targetElm{
height: 0;
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
padding-top: 56.25%;
background: url('bg.png') 0 0 no-repeat;
background-size: contain;
}


高さを0に指定して、

paddingで領域を確保。


paddingの高さの計算については下記の計算式で求められます。

表示画像の高さ ÷ 表示画像の幅 × 100


非常に便利でよく使用しているのですが、

計算式が独特なのでいつも他の知らない人が見てもわかるように


sample

/* 表示画像の高さ ÷ 表示画像の幅 × 100 */

padding-top: 56.25%;

とコメントを入れています。

また計算もめんどうなので、他に方法ないかなと思ってます。

でも便利です。