Unterschied zwischen Hintergrundgröße: Abdeckung und Hintergrundgröße: enthalten

Obwohl die Frage voraussetzt, dass der Leser bereits weiß, wie die contain- und cover-Werte für background-size funktionieren, ist hier eine einfache englische Umschreibung dessen, was die Spezifikation sagt, was als schnelle Grundierung dienen kann:

• background-size: contain stellt sicher, dass das gesamte Hintergrundbild in den Hintergrundbereich passt und das ursprüngliche Seitenverhältnis beibehalten. Wenn der Hintergrundbereich kleiner als das Bild ist, wird das Bild verkleinert, sodass es in den Hintergrundbereich passt. Wenn der Hintergrundbereich höher oder breiter als das Bild ist, werden alle Teile des Bereichs, die nicht vom Hauptbild belegt sind, entweder durch Wiederholungen des Bildes gefüllt, oder letterboxeswhitespace (falls background-repeat) no-repeat.

• background-size: cover macht das Hintergrundbild so groß wie möglich, so dass es den gesamten Hintergrundbereich ausfüllt und keine Lücken aufweist. Der Unterschied zwischen cover und 100% 100% besteht darin, dass das Seitenverhältnis des Bildes beibehalten wird, sodass keine unnatürlichen Dehnungen des Bildes auftreten.

Beachten Sie, dass keiner dieser beiden Schlüsselwortwerte mit einer beliebigen Kombination von Längen-, Prozent- oder auto-Schlüsselwörtern ausgedrückt werden kann.

Wann verwenden Sie eins über dem anderen? Ich persönlich denke, cover hat mehr praktische Verwendungen als contain, also gehe ich zuerst davon aus.¹

hintergrundgröße: Cover

Ein häufiger Anwendungsfall von background-size: cover ist ein Vollbild-Layout, bei dem das Hintergrundbild sehr detailliert ist, z. B. ein Foto, und Sie möchten dieses Bild _/prominent zeigen, allerdings als Hintergrund im Gegensatz zum Hauptinhalt .

Sie möchten, dass das Bild des Browser-Viewports oder des Bildschirms vollständig abgedeckt werden kann, unabhängig vom Seitenverhältnis des Viewports oder unabhängig davon, ob sich das Bild oder das Viewport im Hoch- oder Querformat befindet. Sie machen sich keine Sorgen, wenn dadurch Teile des Bildes abgeschnitten werden, solange das Bild den gesamten Hintergrund ausfüllt und das ursprüngliche Seitenverhältnis beibehält.

Hier ein Beispiel für ein Layout, bei dem der Inhalt in einem halbtransparenten weißen Hintergrund untergebracht ist, der über einem Vollbildhintergrund liegt . Wenn Sie die Höhe des Vorschaubereichs vergrößern, beachten Sie, dass das Bild automatisch vergrößert wird, um sicherzustellen, dass es immer noch den gesamten Vorschaubereich abdeckt.

html {
    height: 100%;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    width: 80%;
    min-height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 5em auto;
    padding: 1em;
}

Wenn Sie stattdessen background-size: contain verwenden, wird das Hintergrundbild verkleinert, damit das gesamte Bild in den Vorschaubereich passt. Dadurch werden hässliche weiße Letterboxen um das Bild abhängig vom Seitenverhältnis des Vorschaufensters gelassen, wodurch der Effekt zerstört wird.

hintergrundgröße: enthalten

Warum sollte man background-size: contain verwenden, wenn hässliche Leerzeichen um das Bild herum liegen? Ein Anwendungsfall, der sofort in den Sinn kommt, ist, wenn der Designer sich nicht für die Leerstellen interessiert, solange das gesamte Bild in den Hintergrundbereich passt.

Das klingt vielleicht nachdenklich, aber bedenken Sie, dass nicht jedes Bild bad mit leerem Raum um ihn herum aussieht. Hier zeigt das Beispiel der Verwendung eines Logos anstelle eines Fotos dies am besten, auch wenn Sie wahrscheinlich kein Logo als Hintergrundbild verwenden.

Ein Logo ist normalerweise eine unregelmäßige Form, die entweder auf einem leeren oder vollständig transparenten Hintergrund sitzt. Es verbleibt ein canvas, der mit einer Volltonfarbe oder einem anderen Hintergrund gefüllt werden kann. Durch die Verwendung von background-size: contain wird sichergestellt, dass das gesamte Bild in den Hintergrund passt, ohne dass Teile davon abgeschnitten werden. Das Bild wirkt jedoch auf der Leinwand wie zu Hause.

Es muss jedoch nicht unbedingt auf ein unregelmäßig geformtes Bild zutreffen. Es kann auch auf rechteckige Bilder angewendet werden. Wenn Sie nicht das Hintergrundbild beschneiden möchten, kann Whitespace entweder als vernünftiger Kompromiss angesehen werden oder gar nicht. Denken Sie an Layouts mit fester Breite? Stellen Sie sich background-size: contain als das Wesentliche vor, aber für Hintergrundbilder und sowohl für Hoch- als auch für Querformat: Wenn Sie sicherstellen können, dass der Inhalt immer zu den Grenzen des Hintergrundbilds passt, wird Whitespace zu einem Nicht-Thema.

Obwohl background-size: contain funktioniert, unabhängig davon, ob das Bild auf Wiederholungen eingestellt ist oder nicht, kann ich mir keine guten Anwendungsfälle mit wiederholten Hintergründen vorstellen.

¹_{Wenn Sie einen Farbverlauf als Hintergrund verwenden, haben sowohl contain als auch cover keine Auswirkungen, da Gradienten keine intrinsischen Dimensionen haben. In beiden Fällen wird der Verlauf so gedehnt, dass er den Container abdeckt, als hätten Sie 100% 100% angegeben.}

background-size:cover deckt das gesamte div mit dem Bild ab. Dies kann nützlich sein, wenn Miniaturbilder eines Hauptbildes angezeigt werden sollen, bei denen das gesamte angezeigte Bild nicht so wichtig ist, Sie jedoch dennoch eine Größe für alle Bilder festlegen möchten. (zum Beispiel ein Blogauszug)

background-size:contain zeigt das gesamte Bild im div an. Dies kann nützlich sein, wenn Sie speziell die Gesamtheit der Bilder anzeigen möchten, jedoch innerhalb einer festgelegten Container-Div-Größe. (Zum Beispiel eine Sammlung von Firmenlogos)

Beide behalten das Bild im gleichen Seitenverhältnis

http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg

background-size:contain;

Wenn Sie contain verwenden, wird möglicherweise immer noch ein weißer Abstand angezeigt, da er die Größe und den Inhalt des Elements selbst einnimmt.

background-size:cover;

deckt das Element vollständig ab, Sie werden keinen weißen Abstand sehen

quelle:

http://www.css3.info/preview/background-size/

siehe Beispiel H

bearbeiten: Verwenden Sie background-size:contain, wenn: Sie möchten, dass Ihr Bild immer im Ansichtsfenster angezeigt wird. Bitte beachten Sie: Während Sie das gesamte Bild sehen können, bleibt der weiße Abstand oben oder unten im Bild, wenn das Seitenverhältnis des Browsers und des Fensters nicht gleich ist.

verwenden Sie background-size:cover wenn: Sie möchten ein Hintergrundbild, möchten jedoch nicht den negativen Effekt des Weißabstands, der enthalten hat. Beachten Sie Folgendes: Wenn Sie background-size:cover; verwenden, können Sie feststellen, dass einige davon abgeschnitten werden das Bild.

quelle: http://alistapart.com/article/supersize-that-background-please

Wir hatten ein großes Gespräch über Cover vs, um nur diese Gedanken zu teilen:

1. landschaftsbild auf dem Landschaftsbildschirm - am besten verwenden Sie cover 

2. hochformat auf Querformatbildschirm - am besten zu verwenden enthalten 

3. hochformat auf Querformatbildschirm - am besten zu verwenden enthalten 

4. hochformat auf Querformatbildschirm - am besten zu verwenden enthalten 

Illustration:

if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen

https://codepen.io/Kinosura/pen/EGZbdy?editors=1100

Enthalten: - Skalieren Sie das Bild auf die größte Größe, sodass sowohl Breite als auch Höhe in den Inhaltsbereich passen können. Explanle: Abdeckung: Skalieren Sie das Hintergrundbild so groß wie möglich, damit der Hintergrund angezeigt wird Bereich ist vollständig vom Hintergrundbild bedeckt. Einige Teile des Hintergrundbildes werden möglicherweise nicht im Hintergrundpositionierungsbereich angezeigt .. _. Beispiel: