Wie kann ich ein responsiv skaliertes CSS-Hintergrundbild ohne Zuschneide- oder Ausrichtungsprobleme erstellen?

Responsives CSS-Hintergrundbild mit proportionaler Skalierung

Die Arbeit mit Hintergrundbildern in CSS kann oft schwierig sein, insbesondere wenn Sie möchten, dass sie reaktionsschnell skaliert werden, um sich an verschiedene Bildschirmgrößen anzupassen und behalten Sie das richtige Seitenverhältnis bei. Lassen Sie uns untersuchen, wie Sie diesen Effekt mithilfe der Eigenschaft „Hintergrundgröße“ erzielen.

Problem: Probleme beim Zuschneiden und bei der Ausrichtung

Bei der Angabe eines Hintergrundbilds mit „background: url()“ können Probleme im Zusammenhang mit auftreten Zuschneiden und Ausrichten. Firefox priorisiert möglicherweise die Höhenskalierung, was zu einem vertikalen Zuschneiden führt, während Chrome das Bild möglicherweise zentriert, anstatt es zu wiederholen.

Lösung: Hintergrundgröße: Cover

Um diese Probleme zu beheben, können wir das verwenden Eigenschaft „Hintergrundgröße“ in Verbindung mit dem Deckwert:

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

Kompatibilität:
Überprüfen Sie die Kompatibilität der Eigenschaft „background-size“ hier: [CSS-Tricks](https://css-tricks.com/css3-background-size/)

Content und Cover erklären

Der Cover-Wert Skaliert das Hintergrundbild auf die kleinste Größe, die den Hintergrundpositionierungsbereich vollständig abdeckt, und behält dabei das Seitenverhältnis bei. Dadurch wird sichergestellt, dass das Bild den gesamten Raum ohne leere oder beschnittene Bereiche ausfüllt.

Im Gegensatz dazu skaliert der Wert „Contain“ das Bild auf die größte Größe, die in den Hintergrundpositionierungsbereich passt, und behält dabei sein Seitenverhältnis bei. Dies kann zu leerem Raum um das Bild führen.

Visuelle Demonstration

Stellen Sie sich ein 4x3-Bild vor, das als Hintergrund für einen 16x9-Bildschirm verwendet wird.

enthalten:

• Das Bild passt ohne Zuschneiden in den Bildschirm, aber oben und unten ist freier Raum it.

Cover:

• Das Bild wird so skaliert, dass es vertikal den gesamten Bildschirm abdeckt, während die Seiten abgeschnitten werden.

Eine detailliertere Demonstration finden Sie in diesem Codeausschnitt:

<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 div.</p>
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich ein responsiv skaliertes CSS-Hintergrundbild ohne Zuschneide- oder Ausrichtungsprobleme erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!