レスポンシブデザインで背景画像を設定したボックスのheight設定

便利だけどいろいろと設定が難しいレスポンシブデザインですが、個人的に一番厄介だと思うのは、背景設定です。
普通のテキストに背景画像を設定しているだけならまだしも、ボタンとして設定している場合が特に難しいというか、間違いやすいというか。

コーヒーメーカー新調希望

<p>
<a href="リンクするURL">
ハートブレーンCAFEで<br />
社長お手製コーヒーを飲もう
</a>
</p>
こんなコードがあるとして、単純に
p a {
display: block;
width: 100%;
background: url(画像url) no-repeat left top;
background-size: contain;
}

では

ハートブレーンCAFEで
社長お手製コーヒーを飲もう

こんな表示になってしまいます。

background画像をレスポンシブに対応させる方法(たすデザイン様より)を参考、というか完全にコピーさせていただきました。
成立させるには、まず縦横の比率を計算します。

高さ÷横幅×100=padding-topの%(パーセント)

そして、cssを下記の通り設定します。

p a {
display: block;
width: 100%;
height: 0;
padding-bottom: 計算して出した%;
background: url(画像のURL) no-repeat 0 0;
background-size: contain;
}

heightを0に、padding-topもしくはbottomに%を設定します。
上部に文字を載せる場合は、padding-topだと枠外に隠れてしまうので、padding-bottomにしてください。

ちなみに文字の内容は

社長「寒い。コーヒー淹れてこよう」(完全に独り言)
私「あ、ごちそうさまです」

空気を読む気が全くない社員Nの、日頃の行いの表れです。

豆にも割とこだわるようです

ごちそうさまでした。

【ハートブレーン】https://heartbrain.net

メールでのお問合せ・お見積りはコチラ