background-size: contain;で背景画像の下側に余白がでないようにしたい

横幅をせばめても、画像全体が表示されるようにcssで背景画像を
background-size: contain;
と設定しました。

しかし、背景画像に高さを指定しているので、
横幅を狭めるとどうしても、背景画像の下側に余白が表示されてしまいます。。。

ネットでしらべて
padding-topを設定したら解決するようなことが書かれていましたが、やってみても状態が変わらずでした。。。

もしご存知の方がいらっしゃれば教えていただけると助かります。

よろしくお願いします。

html
1<div data-aos="fade" data-aos-duration=1000 class="fv"></div>

css
1fv {
2  background-image: url(img/pc-fv@2x.png);
3  background-size: contain;
4  background-repeat: no-repeat;
5  margin: 100px auto 0;
6  max-width: 1280px;
7  height: 620px;
8}

行動規範の内容に同意します

回答3件

ベストアンサー

背景画像の大きさに要素の大きさを合わせるのは難関ですが、できないことはないです。ある程度状況は限定されます。

条件は、背景画像のサイズが不変であること。具体的には縦横比が固定であれば良いです。
また、背景画像の上に何かしらのコンテンツを表示させる場合は、div.fvの中に別の要素を入れてそこに記載することを許容できることです。
以下に例を示します。仮に1200x600pxの背景画像を表示させることとします。
width:heightの比は2:1です。div.fvのpadding-topにwidthの1/2の値を割合でセットします。
width: 100% なら padinng-top: 50%, width: 80% なら padding-top: 40% です。
こうすることによりdiv.fv要素で背景画像の描画に必要な領域を確保しつつ、heightがwidthに連動して伸縮させられるようになります。
なお、.fvにheightは指定しないでください。 heightの代わりにpadding-topで高さを決めていますので。

この方法は、質問文に書いてある「padding-topを設定することで解決する」方法と同じであると思われます。もう一度情報の記事をよく読んで内容を理解してください。

html
1<div class="fv">
2  <div class="fv-inner">
3    <h1>ダミータイトル</h1>
4  </div>
5</div>
6<div class="concept">ここからConcept</div>

scss
1div.fv{
2  color: #fff;
3  width: 100%;
4/* paddingでパーセンテージを指定すると縦も横もwidthからの相対数値になる。*/
5/* padding-top(bottomでも良い)の大きさを背景画像の縦横比に合わせる   */
6  padding-top: 50%;
7/* コンテンツ要素にabsoluteを使う関係でfvはrelative   */
8  position: relative;
9/* 背景画像の措定。このデモでは1200x600の画像を使用。   */
10  background-image: url(https://placehold.jp/3d4070/ffffff/1200x600.png?text=FirstView);
11  background-size: contain;
12  background-clip: border-box;
13}
14/* fvの上に文字やコンテンツを重ねる場合に使うinner要素*/
15div.fv-inner{
16/* fvにぴったり重ねるように配置する。left等の指定はborderからの距離になる。つまりpadding分を含む。   */
17  position: absolute;
18  left: 0;
19  top: 0;
20  bottom: 0;
21  right: 0;
22}