jQueryプラグインのbxsliderを使用してレスポンシブ対応のサイトを作っています。メイン画像は背景画像として表示し、containでブラウザの幅いっぱいに表示したいのですが、高さを指定しないと画像が表示されず、指定すると当然ですが高さが固定されるためブラウザを縮めた時に、下に続く要素との間隔が広くなってしまいます。解決方法をご教授いただけると嬉しいです。
javascriptで動的に高さを指定してやればいい。
レスポンシブ用のオプションなかったけ?
多分まわりの要素のCSSのどこかがミスってるんじゃないかな?そぎ落として、試してみては?
高さを vh とか % で指定すりゃいんじゃないの。vh がオススメだけど。
heightを0にしてpadding-topを%で指定するのはどうでしょうか?
まとめてのお礼ですみません。padding-topのパーセント指定の値を修正したところ解決しました!皆様ありがとうございました。スライダーの画像1枚分で計算してしまっていたのがうまくいかない原因でした。
みんなの回答 6 件
javascriptで動的に高さを指定してやればいい。
レスポンシブ用のオプションなかったけ?
多分まわりの要素のCSSのどこかがミスってるんじゃないかな?
そぎ落として、試してみては?
高さを vh とか % で指定すりゃいんじゃないの。vh がオススメだけど。
heightを0にしてpadding-topを%で指定するのはどうでしょうか?
レスポンシブWebデザインでハマりがちな%指定
http://design-spice.com/2014/03/24/percentag/まとめてのお礼ですみません。
padding-topのパーセント指定の値を修正したところ解決しました!皆様ありがとうございました。
スライダーの画像1枚分で計算してしまっていたのがうまくいかない原因でした。
関連するトピックス