LoginSignup
198

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-10-26

レスポンシブやスマホサイトを制作していて、
背景画像を可変対応させたい時があります。
みなさんどうやっているでしょうか。

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

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

でも便利です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
198