webentwicklung-frage-antwort-db.com.de

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

Visuell kann ich den Unterschied erkennen, aber in welchen Situationen sollte ich eine vor der anderen bevorzugen? Gibt es einen Punkt, an dem sie überhaupt verwendet werden, oder können sie durch Prozentwerte ersetzt werden?

Momentan scheint es mir nicht möglich zu sein, einen Trial-Error-Ansatz zu verwenden, wenn ich diese Eigenschaften verwende.

Ich kann auch nur recht vage Erklärungen finden und vor allem finde ich das W3C doc ziemlich verwirrend.

Werte haben folgende Bedeutung:

'enthalten'

Skalieren Sie das Bild unter Beibehaltung des intrinsischen Seitenverhältnisses (falls vorhanden) auf die größte Größe, so dass sowohl die Breite als auch die Höhe kann in den Hintergrundpositionierungsbereich passen.

'Abdeckung'

Skalieren Sie das Bild unter Beibehaltung des intrinsischen Seitenverhältnisses (falls vorhanden) auf kleinste Größe, so dass sowohl die Breite als auch die Höhe vollständig decken den Hintergrundpositionierungsbereich ab.

Ich bin wahrscheinlich ein bisschen dick, aber kann mir jemand eine einfache englische Erklärung mit entsprechenden Beispielen geben?

Bitte benutzen Sie diese Geige . Vielen Dank.

CSS

body{
    width:500px;
    height:500px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-size:contain;
    background-repeat:no-repeat;
}

Hinweis 

Die akzeptierte Antwort ist die, die ich derzeit am prägnantesten und vollständigsten finde. Vielen Dank an alle für ihre Hilfe.

19
U r s u s

Sie können die Pseudocodes betrachten, die die Ausgabe steuern. Die der Bildgröße zugewiesenen Werte hängen direkt von den Seitenverhältnissen des Container- und Seitenverhältnisses des Hintergrundbilds ab.

Hinweis:Aspect ratio = width / height

Enthalten

if (aspect ratio of container > aspect ratio of image)
    image-height = container height
    image-width = aspect-ratio-preserved width

else
    image-width = container width
    image-height = aspect-ratio-preserved height

Abdeckung

if (aspect ratio of container > aspect ratio of image)
    image-width = container width
    image-height = aspect-ratio-preserved height

else
    image-height = container height
    image-width = aspect-ratio-preserved width

Sie sehen die Beziehung? In cover und contain bleibt das Seitenverhältnis erhalten. Die if - else - Bedingungen sind jedoch in beiden Fällen umgekehrt.

Dies macht cover so, dass die gesamte Seite abgedeckt wird, ohne dass ein weißer Bereich sichtbar ist. Wenn das Seitenverhältnis des Containers größer ist, skalieren Sie das Bild so, dass seine Breite der Containerbreite entspricht. Jetzt wird die Höhe größer, da das Seitenverhältnis kleiner ist. Somit deckt es die gesamte Seite ohne weißen Bereich ab.

F. Können sie durch Prozentsätze ersetzt werden?

Nein, nicht nur in Prozenten. Sie brauchen eine Konditionierung.

F: In welchen Situationen sollte ich eins vor dem anderen bevorzugen?

Wenn Sie eine Website erstellen, möchten Sie keinen weißen Bereich im festen Hintergrund. Verwenden Sie also cover.

containkann andererseits verwendet werden, wenn Sie einen sich wiederholenden Hintergrund verwenden (z. B. wenn Sie ein Musterbild mit einem sehr hohen Seitenverhältnis für veiwport/container haben, können Sie contain verwenden und background-repeat auf repeat-y setzen). Eine zweckmäßigere Verwendung für contain wäre jedoch ein Element mit fester Höhe/Breite.

35
The Pragmatick

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.1

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.


1Wenn 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.

14
BoltClock

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

5
Lee
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

2
Gerwin

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

0
Gleb Dolzikov

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:

0