Heim >Web-Frontend >CSS-Tutorial >Wie passt ein Hintergrundbild perfekt in ein DIV?

Wie passt ein Hintergrundbild perfekt in ein DIV?

Susan Sarandon
Susan SarandonOriginal
2024-12-20 20:06:11989Durchsuche

How to Make a Background Image Fit Perfectly Inside a DIV?

Passen Sie einen Bildhintergrund an ein DIV an

Sie möchten, dass ein Hintergrundbild vollständig innerhalb eines DIV angezeigt wird, ein Teil des Bildes jedoch nicht abgeschnitten werden. Um dieses Problem zu beheben, sollten Sie die Eigenschaft „Hintergrundgröße“ verwenden, die von den meisten modernen Browsern unterstützt wird.

Für ein Hintergrundbild, das proportional skaliert wird, um in das DIV zu passen:

background-size: contain;

Für ein Hintergrundbild das sich ausdehnt, um das DIV vollständig abzudecken und bei Bedarf Teile des Bildes zu verdecken:

background-size: cover;

Hier ist ein Beispiel mit der Hintergrundgröße: enthalten:

<div>

Und ein Beispiel für die Verwendung von „background-size: cover“:

<div>

Jetzt wird Ihr Hintergrundbild vollständig im DIV angezeigt, unabhängig von seiner Originalgröße oder seinem Seitenverhältnis .

Das obige ist der detaillierte Inhalt vonWie passt ein Hintergrundbild perfekt in ein DIV?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn