So implementieren Sie mit Divs gefüllte CSS-Bilder

Die erste Struktur: Das Bild ist ein untergeordnetes Element

 <div>
        <img src="Bildadresse eingeben" alt="" class="Img">
</div>

Methode 1: Fügen Sie object-fit:cover zum img-Element hinzu

 div{
Breite: 500px;
Höhe: 500px;
}
.Img{
    Breite: 100 %;
    Höhe: 100 %;
    object-fit:cover;
}

Methode 2: Zentrieren Sie das img-Element vertikal und stellen Sie die Mindestbreite und -höhe auf Vollbild ein

 div{
	Breite: 500px;
	Höhe: 500px;
	Position:relativ;
	Überlauf:versteckt;
	}
.Img{
	Position: absolut;
	oben: 50 %;
	links: 50 %;
	Anzeige: Block;
	Mindestbreite: 100 %;
	Mindesthöhe: 100 %;
	transform:translate(-50%,-50%);
}

Die zweite Struktur: Das Bild ist ein Hintergrundbild

 <div class="container"></div>

Methode: Fügen Sie dem div-Element „background-size: cover“ hinzu. Stellen Sie das Bild auf „Non-Repeat“ ein

 .Container{
				Höhe: 500px;
				Breite: 500px;
				Rand: 0px automatisch;
				Hintergrund: url('../Status/img/health.png') no-repeat;
				Hintergrundgröße: Cover;
			}

Damit ist dieser Artikel über das Füllen eines Div mit CSS-Bildern abgeschlossen. Weitere Inhalte zum Füllen eines Div mit CSS-Bildern finden Sie in den vorherigen Artikeln auf downcodes.com oder durchsuchen Sie weiter unten die entsprechenden Artikel Downcodes in der Zukunft.