下記質問の続きです。
https://teratail.com/questions/13087
レスポンシブでヘッダーの背景にメインイメージを配置しようとしています。
下記サイトより、計算式はわかったのですが、親要素のbodyの縦幅は常に変化するのですが、
heightを現場ではどうしているのでしょうか?
まさか毎回追加するごとに計算式を変えているのでしょうか?
求める要素の高さ÷親要素のコンテンツの高さ×100%
http://design-spice.com/2014/03/24/percentag/
下記の方法で、画像のサイズは再現できたのですが、背景の上に表示される、情報が背景の下に出てしまいます。
paddingが原因なのはわかっていますが、下記ですと内容がない場合しか使えないようです。
#header {
background: url(../img/common-img/main-img.png) no-repeat;
background-size:contain;
padding-top: 57.2%;
width : 100%;
}
JSを使わないと親要素の縦幅が常に変化するので、難しいようですが、
jQueryである程度簡単に作れたり、そのようなプラグインをご存知でしたら教えて頂ければ幸いです。
解決に結びつく回答をいただけたらBAにしたいとおもいます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。