Help us understand the problem. What is going on with this article?

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%;

とコメントを入れています。
また計算もめんどうなので、他に方法ないかなと思ってます。

でも便利です。

39_isao
鮭とメロンパンとコーヒー牛乳が好物です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away