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

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

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

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

でも便利です。