今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

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

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

僕は
いつもこちらの記事を参考にさせて頂いてます。

www.go-next.co.jp

 

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

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

でも便利です。

 

Qitaでも公開中。

qiita.com

 

f:id:sudara_bluse:20171010023946p:plain