Wie kann ich die Breite eines CSS-Hintergrundbilds anpassen und die Höhe proportional automatisch skalieren?

CSS-Hintergrundbild an Breite anpassen, Höhe automatisch im Verhältnis skalieren

Problem

In CSS wird ein Hintergrundbild mit gleicher Breite festgelegt Die Anpassung der Seitenbreite und -höhe zur Beibehaltung der Bildproportionen kann eine Herausforderung darstellen, insbesondere wenn es um den vertikalen Zuschnitt und die Bildplatzierung geht.

Lösung: Hintergrundgröße: Cover

CSS3 bietet die Eigenschaft „Hintergrundgröße“, mit der Sie die Bildgröße steuern können. Durch die Einstellung „background-size: cover“ können Sie das Bild auf die kleinste Größe skalieren, die den Hintergrundpositionierungsbereich vollständig abdeckt und gleichzeitig das Seitenverhältnis beibehält.

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

Diese Einstellung stellt sicher, dass das Hintergrundbild die Breite der Seite abdeckt , und seine Höhe wird entsprechend skaliert, was zu der gewünschten Reaktionsfähigkeit und dem gewünschten Zuschneideverhalten führt.

Vergleich von „Contain“ und „Cover“

Die Eigenschaft „Hintergrundgröße“ bietet zwei Zusätzliche Werte, include und cover, die ein unterschiedliches Skalierungsverhalten bieten:

• contain: Stellt sicher, dass das Bild in den Hintergrundpositionierungsbereich passt, ohne es zu beschneiden, was dazu führt, dass leerer Raum um das Bild herum sichtbar ist Bild.
• Abdeckung: Stellt sicher, dass das Bild den gesamten Hintergrundpositionierungsbereich abdeckt, was zu einem möglichen Zuschneiden des Bildes führt Passform.

Visueller Vergleich

Beachten Sie, dass das Bild unten in einem Begrenzungsrahmen angezeigt wird. „Content“ stellt sicher, dass das Bild vollständig innerhalb der Box sichtbar ist, während „Cover“ die Box mit dem Bild füllt, was zu einem Zuschnitt am unteren Rand führt:

[Bild des Bildes mit den Einstellungen für die Hintergrundgröße „Contain“ und „Cover“]

Live-Demonstration

Der folgende Code demonstriert den Unterschied zwischen „Contain“ und „Cover“:

<div><div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully contained.</p>
</div>
<div><div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the <code><div></code>.</p>
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite eines CSS-Hintergrundbilds anpassen und die Höhe proportional automatisch skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!