フルサイズ（高さ）の背景画像を表示するには：

Question

私はstellar.jsを使って視差のあるHTMLページを作成しています。 CSSで は、私が使用します。

html, body {height: 100%;} 

#slide1 { 
height: auto; 
background-image:url('../images/1.jpg'); 
background-color:#fff; 
background-repeat: no-repeat; 
background-size: cover; 
background-attachment: fixed; } 

しかし、イメージが切断され、画像の下には表示されません。

すべての画像を表示するには、セクションの高さ（＃slide1）を設定できますか？

Answer 1

autoを使用する代わりに＃slide1 heightプロパティを100％に設定してみてください。

Answer 2

background-size:cover;を使用すると、要素が画像とまったく同じh/w比を持つ場合を除いて、常に垂直または水平に背景画像がトリミングされます。キーは、カットしたときに見た目がよくなるように背景を選択して配置することです。 9とほとんどのモバイルデバイスが垂直に保持されています

ほとんどの場合、あなたはあなたの要素min-height、例えば：

#slide1 { 
    min-height: 600px; 
} 

最も人気のあるデスクトップ比が16である点に注意してくださいを与えたいです。必要に応じて、さまざまなデバイス/ビューポートの幅に対して@mediaクエリを使用します。

スライドの高さをビューポートの高さ（deviceScreen |ブラウザの高さ）よりも大きくしない場合は、max-height: 100vh!important;を上記のルールに追加します（モバイルデバイスで役立ちます）。