背景画像のサイズに応じて要素を可変させたい。

レスポンシブコーディングなどで背景に画像を当てるような場合、高さが可変にならずに困るんですが、その解決策を見つけました。

この場合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

ありがとうございます!


Leave a Reply

Your email address will not be published. Required fields are marked *