背景画像が正しく拡大縮小されていません。高さを100％に変更しました。

Question

私の背景イメージは他のページと同じ縮尺ではありません。そして私がそうするようになったら、ページを縮小するときに、その下に大きな空白の隙間ができました。

.vintage { 
    width: 100%; 
    height: 100vh; 
    background-image: url(vintagemcdonalds.jpg); 
    background-repeat: no-repeat; 
} 

Answer 1

全体のdivをカバーするためにbackground-imageためbackground-size:coverを使用しています。

は、ここでは、このプロパティの詳細を参照してください。あなたのCSSファイルにプロパティ値カバーを追加CSS3 background-size Property

.vintage { width: 100%; 
 
height: 100vh; 
 
background-image: url(http://placehold.it/350x150); 
 
background-repeat: no-repeat; 
 
background-size:cover; 
 
}

<div class="vintage"> 
 

 
</div>

Answer 2

してみてください。このよう

：

div { 
background-image:url('vintagemcdonalds.jpg'); 
background-size:cover; 
} 

このは、背景領域が完全に背景画像によって覆われるようにできるだけ大きいことが背景画像を拡大縮小することができます。

背景画像のいくつかの部分は、背景配置領域内に表示されていない場合は、のようなあなたのCSSにいくつかの余分な情報を与えてみてください。

width: 100vw; 
height: 100vh; 

（CSS3は私たちに、ビューポート、相対単位を与えることに注意してください。100vwは、ビューポートの幅の100％を意味100VH、高さの100％）

あなたが繰り返すように背景画像を使用しない場合は、単純に追加します。

background-repeat:no-repeat; 

。

詳細については、「https://css-tricks.com/perfect-full-page-background-image/」をチェックすると、フルスクリーンの背景で作業しようとする際に考慮すべきさまざまなアプローチが得られます。

、このことができます希望と幸運を！ :)