Wie dehne oder skaliere ich ein CSS-Hintergrundbild, damit es in seinen Container passt?

So dehnen oder skalieren Sie einen CSS-Hintergrund, damit er in seinen Container passt

Wenn Sie ein Hintergrundbild in CSS festlegen, möchten Sie möglicherweise, dass es passt Passen Sie die Abmessungen des Behälters perfekt an oder dehnen Sie sich so aus, dass er die gesamte Fläche abdeckt. CSS bietet eine unkomplizierte Lösung, um diesen Effekt zu erzielen.

Lösung: Verwenden Sie die Eigenschaft „Hintergrundgröße“

CSS3 hat die Eigenschaft „Hintergrundgröße“ eingeführt, mit der Sie die festlegen können Größe und Skalierung von Hintergrundbildern. Um einen Hintergrund so zu strecken oder zu skalieren, dass er seinen Container ausfüllt, verwenden Sie die folgende Syntax:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or other units */
}

Der Wert 100 % gibt an, dass der Hintergrund auf die volle Breite seines Containers gedehnt wird, während der Wert „Auto“ die Höhe zulässt automatisch anzupassen, um das ursprüngliche Seitenverhältnis des Bildes beizubehalten.

Kompatibilität

Diese Lösung wird von modernen Browsern unterstützt seit 2012, einschließlich Chrome, Firefox, Safari und Edge. Bei älteren Browsern können Sie die Verwendung von Herstellerpräfixen wie -webkit oder -moz in Betracht ziehen, um die Kompatibilität sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie dehne oder skaliere ich ein CSS-Hintergrundbild, damit es in seinen Container passt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!