背景画像のサイズに応じて要素を可変させたい。
レスポンシブコーディングなどで背景に画像を当てるような場合、高さが可変にならずに困るんですが、その解決策を見つけました。
この場合padding-topが使えるみたいです。
下によると、
‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’
Percentages: refer to width of containing block
とあるので、％で指定すればpadding-topやpadding-bottomを指定しても親要素の幅に対する割合になるようです。
Chrome, safari, FF, IE9~で確認できました。
参考：
https://t87r.wordpress.com/2013/07/07/%E3%82%B5%E3%82%A4%E3%82%BA%E5%8F%AF%E5%A4%89%E3%81%A7%E7%B8%A6%E6%A8%AA%E6%AF%94%E5%9B%BA%E5%AE%9A%E3%81%AE%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E8%A6%81%E7%B4%A0%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99/
http://www.w3.org/TR/CSS2/box.html#propdef-padding-top
ありがとうございます！