Wie kann ich ein Hintergrundbild an ein Div anpassen, ohne es zu beschneiden?

Hintergrundbilder an Divs anpassen

Um ein Hintergrundbild innerhalb eines Divs anzuzeigen, ohne es zuzuschneiden, verwenden Sie die Eigenschaft „Hintergrundgröße“. Abhängig von Ihrem beabsichtigten Ergebnis können Sie wählen, ob Sie das Bild so skalieren möchten, dass es in das Div passt, oder ob es das gesamte Div abdecken soll.

Skalieren des Hintergrundbilds, um es an das Div anzupassen

Wenn Sie das Hintergrundbild so skalieren möchten, dass es innerhalb des Div vollständig sichtbar bleibt, setzen Sie die Eigenschaft „Hintergrundgröße“ auf enthalten.

background-size: contain;

Skalieren des Hintergrundbilds, um das Div abzudecken

Alternativ, wenn Sie möchten, dass das Hintergrundbild das gesamte Div abdeckt, verwenden Sie die Hintergrundgröße Eigenschaft festgelegt auf Cover.

background-size: cover;

Beispiele

Im Folgenden finden Sie einige Beispiele, um die Auswirkungen dieser Einstellungen zu veranschaulichen:

<div><ul>
<li>Mit Hintergrund -size: include;, das Bild wird verkleinert, um in das Div zu passen, wobei sein Seitenverhältnis erhalten bleibt.</li>
<li>Mit Hintergrundgröße: cover;, das Bild wird gestreckt, um das gesamte Div abzudecken, wodurch möglicherweise das Seitenverhältnis verzerrt wird.</li>
</ul></div>

Das obige ist der detaillierte Inhalt vonWie kann ich ein Hintergrundbild an ein Div anpassen, ohne es zu beschneiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!