Wie kann ich ein Hintergrundbild proportional an die Seitenbreite anpassen?

Hintergrundbilder proportional skalieren: Breite beibehalten und Höhe automatisch anpassen

Hintergrundbild an Breite anpassen, Höhe automatisch skalieren

Um den gewünschten Effekt zu erzielen, wo Wenn die Breite eines Hintergrundbilds mit der Seitenbreite übereinstimmt, während seine Höhe automatisch skaliert wird, können wir die Eigenschaft „Hintergrundgröße“ von CSS3 nutzen. Indem wir es auf „Abdecken“ einstellen, weisen wir den Browser an, das Bild auf die kleinste Größe zu skalieren, bei der sowohl Breite als auch Höhe den Hintergrundpositionierungsbereich vollständig abdecken.

Code-Implementierung

Hier ist das CSS-Code-Snippet dazu Implementieren Sie diesen Effekt:

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

Als zusätzliche Verbesserung können wir optionale Argumente für die Hintergrundposition verwenden, um das Bild vertikal zu zentrieren horizontal.

Eierplan für „contain“ und „cover“

Um den Unterschied zwischen „contain“ und „cover“ zu verdeutlichen, verwenden wir ein Beispiel:

Contain:

Das Bild ist im Hintergrundpositionierungsbereich enthalten, sodass leerer Raum mit der Hintergrundfarbe gefüllt bleibt.

Cover:

< ;img src="https://i.sstatic.net/p96P5.png" alt="Wie kann ich ein Hintergrundbild proportional an die Seitenbreite anpassen?">

Die Das Bild deckt den Positionierungsbereich vollständig ab, Teile davon können jedoch beschnitten sein.

Fazit

Mit der Verwendung von „background-size: cover“ können Sie ein ansprechendes Hintergrundbild erstellen, das automatisch an die Breite angepasst wird der Seite unter Beibehaltung der Proportionen. Diese Technik ermöglicht flüssige und optisch ansprechende Designs, die sich an unterschiedliche Bildschirmgrößen anpassen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Hintergrundbild proportional an die Seitenbreite anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!