CSSで背景画像(background-image)を指定し、レスポンシブに対応させるために、width:100%にしてheight:autoで可変表示させたいと思いました。でもこの方法では思ったような表示にはならないんですね。HTMLに画像を挿入する場合imgにmax-width:100%でheightをautoなどを指定すればウィンドウサイズに合わせて可変で画像を表示することができます。レスポンシブデザインではよく使用される方法ですね。しかし、CSSで画像を指定する場合はそういうわけにはいかないようです。自分でも最近そのことに気づいたのですが（笑）。CSSで画像を入れて高さをautoにしてもそもそものボックスに高さがない（コンテンツを何も入れていない場合）ので表示されないですよね。なので今回はCSSで縦横比を維持したまま背景画像(background-image)をレスポンシブに対応する方法を記録したいと思います。

CONTENTS

• 1.padding-top（計算した値）で高さを指定
• 2.calcを使って計算を便利に

1.padding-top（計算した値）で高さを指定

まず基本padding-topもしくはbottomに値を指定します。その値というのは「画像の高さ÷画像の幅×100」という計算式を使い、値を算出します。計算で出た値を%でpadding-topに指定します。widthは通常と同じように100%を指定しておけば大丈夫です。heightは0にしてpadding-topで高さを指定します。下記が例になります。background-sizeは必要に応じて使用ください。

これでCSSで背景画像をしていしたときにレスポンシブに対応することができます。

DEMO

2.calcを使って計算を便利に

先に紹介した方法以外に計算を簡単にさせる方法があります。それはcalcを使う事です。calcは計算式を記入しておけば自動で計算してくれます。値を変えたい場合でも数字を変更するだけで計算してくれるので便利です。最新のブラウザではすべてサポートされているみたいですが、古いブラウザではサポートしていない場合もあるので、そこは注意が必要です。こちらのcalcサポートブラウザでご確認ください。指定の方法は以下のサンプルをご覧ください。