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

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

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

では

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

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

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

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

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

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

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

ちなみに文字の内容は

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

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

ごちそうさまでした。

【ハートブレーン】https://blog.heart-kokoro.net