Vollbild anzeigen (Höhe) mit Hintergrund-Größe: cover

-1

Ich schreibe eine HTML-Seite mit Parallax mit stellar.js. Ich In CSS:Vollbild anzeigen (Höhe) mit Hintergrund-Größe: cover

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; }

Aber das Bild wird geschnitten und der untere Rand des Bildes ist nicht sichtbar.

Ist es möglich, die Höhe des Abschnitts (# slide1) festzulegen, um das gesamte Bild anzuzeigen?

Quelle

2016-05-07 Giuseppedes

Versuchen Sie, die Eigenschaft # slide1 height auf 100% zu setzen, anstatt auto zu verwenden.

Quelle

2016-05-07 18:49:41

Ihre Lösung ist so effektiv wie beten. –

Ihr Kommentar Andrei ist jugendlich, beleidigend und unangemessen. –

Ihre Antwort leitet das Problem an den umschließenden Block weiter, der eine ausreichende Menge/resultierender Höhe haben kann oder auch nicht, damit "# slide1" mehr von seinem Hintergrundbild anzeigt. Außerdem erklären Sie nicht, wann und warum das funktionieren würde, was die Lösung unangemessen macht und meinen Vergleich eher angemessen macht. Ich meinte es nicht als Beleidigung, ich hatte gehofft, du würdest die Ähnlichkeit sehen und die Qualität deiner zukünftigen Antworten verbessern. –

Mit background-size:cover; wird das Hintergrundbild immer vertikal oder horizontal beschnitten, außer wenn das Element das exakt gleiche H/W-Verhältnis wie das Bild hat. Der Schlüssel ist, den Hintergrund so zu wählen und zu positionieren, dass er beim Schneiden noch gut aussieht.

Wahrscheinlich wollen Sie Ihr Element ein min-height, z.B .:

#slide1 { 
    min-height: 600px; 
}

Beachten Sie die beliebtesten Desktop-Verhältnis geben, ist 16: 9 und die meisten mobilen Geräte sind vertikal gehalten. Verwenden Sie ggf. @media Abfragen für verschiedene Geräte-/Ansichtsfensterbreiten.

Wenn Sie nicht möchten, dass Ihre Folie eine größere Höhe als die Höhe des Ansichtsfensters (Gerätescreen | Browserhöhe) aufweist, fügen Sie der obigen Regel max-height: 100vh!important; hinzu (nützlich auf mobilen Geräten).

Quelle

2016-05-07 18:49:42

Vollbild anzeigen (Höhe) mit Hintergrund-Größe: cover

Antwort

Verwandte Themen