Wie kann ich das Seitenverhältnis beibehalten, wenn ich skalierbare Hintergrundbilder in CSS festlege?

Skalierbare Hintergrundbilder: Beibehalten des Seitenverhältnisses

Im Webdesign kann das Festlegen eines Hintergrundbilds, das sich nahtlos an die Abmessungen der Seite anpasst, eine Herausforderung sein knifflige Aufgabe. Entwickler haben häufig Probleme damit, dass das Bild unverhältnismäßig gestreckt oder beschnitten wird, was zu unerwünschten Ergebnissen führt. CSS3 bietet jedoch mit der Eigenschaft „background-size“ eine elegante Lösung für dieses Dilemma.

Mit der Eigenschaft „background-size“ können Sie die Größe Ihres Hintergrundbilds auf verschiedene Arten festlegen. Um das Seitenverhältnis Ihres Bildes beizubehalten und gleichzeitig sicherzustellen, dass es zu den Abmessungen Ihres Körperelements passt, verwenden Sie den Cover-Wert.

Wenn Sie die Hintergrundgröße auf „Cover“ einstellen, wird das Bild automatisch vollständig auf die kleinstmögliche Größe skaliert deckt den Hintergrundpositionierungsbereich ab. Das bedeutet, dass das Bild immer die gesamte Breite der Seite ausfüllt, während seine Höhe angepasst wird, um die ursprünglichen Proportionen beizubehalten.

Bedenken Sie beispielsweise den folgenden Code:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Dieses CSS wird Stellen Sie sicher, dass das Bild „background.svg“ über die gesamte Breite der Seite passt, während seine Höhe entsprechend skaliert wird, um seine Proportionen beizubehalten.

Verstehen von „Contain“ vs. Cover

In CSS3 gibt es zwei Hauptwerte für die Eigenschaft „Hintergrundgröße“: „contain“ und „cover“. Obwohl beide Werte das Seitenverhältnis des Bildes beibehalten, verhalten sie sich unterschiedlich.

• enthalten: Skaliert das Bild auf die größtmögliche Größe, die vollständig in den Hintergrundpositionierungsbereich passt. Dies bedeutet, dass einige Bereiche außerhalb des Bildes möglicherweise leer bleiben.
• Cover: Skaliert das Bild auf die kleinstmögliche Größe, die den Positionierungsbereich im Hintergrund vollständig abdeckt. Dies kann dazu führen, dass einige Bereiche des Bildes abgeschnitten werden.

Eine hilfreiche Möglichkeit, den Unterschied zwischen „Einschließen“ und „Abdecken“ zu veranschaulichen, besteht darin, sich ein Rechteck vorzustellen, das Ihren Bildschirm darstellt, und ein Rechteck, das Ihr Bild darstellt.

• enthalten: Das Bildrechteck passt in das Bildschirmrechteck und lässt möglicherweise leeren Raum um es herum übrig.
• Abdeckung: Das Bildrechteck wird erweitert, um das Bildschirmrechteck auszufüllen. Möglicherweise werden Teile des Bildes abgeschnitten.

Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenverhältnis beibehalten, wenn ich skalierbare Hintergrundbilder in CSS festlege?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!