background-sizeでcontainすると縮小で余白サイズが変わってしまいます…。

行いたいことは、とあるDIVなどに
background-size:contain;
を用いて画像を常に全体を表示させる設定を行っています。

<div id="contain_box">背景画像指定</div>
<p>次のコンテンツ</p>

しかしながら、この指定ですとレスポンシブの際、画面を拡大縮小するたびに、その下にある次のコンテンツとの隙間も大きくなったり小さくなったりしてしまいます。
画像全体を表示したいので、coverの指定はできません、試したところ画像の一部が切れてしまいます。

この隙間部分を、どの画面でも統一して決まった高さを持たせることはできないものでしょうか？
お詳しい方いらっしゃいましたらアドバイス頂けないでしょうか。
宜しくお願いいたします。

No.3 ベストアンサー 回答者： naokita 回答日時： 2021/01/19 20:40

#hoge { background: url("bg.jpg") 0 50% /contain no-repeat; overflow: hidden;

width: 100%; margin: auto;
}
#hoge:before{ content:""; display: block; padding-top: 40%;}

こんな感じで、
その画像の「％＝高÷幅」を計算して割り出しましょう。

この回答へのお礼

有難うございます！
#hoge:beforeを指定してblockにして、高さを%指定するという方法に驚きました、目からうろこでした。
:before　このような使い方があるのですね…。

今回、1067px/1600px*100で66.68％の指定で試したところ綺麗に可変できました。
大変有難うございました。㎜

お礼日時：2021/01/20 15:25

No.2 回答者： fujillin 回答日時： 2021/01/19 16:48

No1です

＞min-height: 500px;
高さを固定指定にしているようなものなので、No1での推測通りになっていますね。


汎用的でなくても良いのなら、背景画像のプロポーションが横長のようなので…
仮に、縦横比が1：2と仮定するなら、事前に計算して指定してしまう方法が簡単です。

そのdivのサイズの決まり方がわかりませんが、vw単位で指定できるのなら、そのまま高さ方向も半分のvwを指定しておけば、画像のプロポーションに合わせてdivのサイズが変わるはずです。

%指定でないとできないようであれば、「×0.5」をブラウザに計算させるという方法でも、同様のことができるはずです。
https://developer.mozilla.org/ja/docs/Web/CSS/ca …


あるいは、画像を背景ではなくdivの子要素にしておくと、画像の場合は、横幅を指定することでプロポーショナルに拡大/縮小されるようになります。
こちらの方法であれば、画像のサイズ・形状に関係なく利用できるので汎用的とは言えますが、画像以外の要素を重ねて表示するためには position:absolute などで重ねる必要がでてきます。

この回答へのお礼

有難うございます、画像を背景では無く子要素にするという考え方も場合によって使える方法だと思いました、大変参考になりました、有難うございます。

お礼日時：2021/01/20 15:19

No.1 回答者： fujillin 回答日時： 2021/01/19 14:42

こんにちは

どうやってレイアウトいるのかまったく不明なのでなんともわかりませんが、背景の影響とは考えにくいので・・・

背景がno-repeatで、DIVが縦長なだけということはありませんか？

この回答へのお礼

有難うございます。
情報不足ですみません！以下のような設定で再現できるかと思います。
このままだと何も変わらないように見えますが、実際に何でも良いので背景画像にbg.jpgとして画像を指定してみてください。
余白が空くというか、containで指定するので幅いっぱいに表示しようとして、そのせいで高さが可変してしまいます。
恐らく根本的な原因は、高さを決め打ちで500pxなどとしているのが問題だと思うのですが、何か高さ自体も連動して変化する定義方法がありましたらアドバイス願います。㎜

#hoge {
background: url("bg.jpg") no-repeat top center;
background-size: contain;
width: 100%;
min-height: 500px;
margin: auto;
}

<div id="hoge"></div>
<p>この上の余白が空いてしまう！！</p>

お礼日時：2021/01/19 15:36