CSS füllt das übergeordnete Container-Div mit img-Bildern und passt sich der Containergröße an

Wenn auf einer Seite mehrere Bilder eingefügt werden, kann die Bildgröße inkonsistent sein. Wenn wir sie jedoch in einer konsistenten Größe anzeigen möchten, führt das direkte Festlegen der Bildgröße dazu, dass das Bild verzerrt wird. Dies ist das Problem, auf das wir gestoßen sind. Sehen wir uns die Lösung an.

<div>
        <img src="Adresse des importierten Bildes" alt="">
</div>

Methode 1: Zentrieren Sie das img-Element vertikal und stellen Sie seine Höhe und Breite auf einen minimalen Vollbildwert ein

div{
    Position: relativ;
 Breite: 100px;
    Höhe: 100px;
    Überlauf: versteckt;
}
 div img{
    Position: absolut;
    oben: 50 %;
    links: 50%;
    Anzeige: Block;
    Mindestbreite: 100 %;
    Mindesthöhe: 100 %;
    transformieren: übersetzen(-50 %, -50 %);
}

Methode 2: Legen Sie den CSS-Stil von img fest und fügen Sie object-fit: cover hinzu, das der Hintergrundgröße: cover des Hintergrundbilds in CSS3 ähnelt.

div{
  Breite: 100px;
  Höhe: 100px;
 
}
div img{
    Breite: 100 %;
    Höhe: 100%;
    Objekt-Fit:Abdeckung;
}

Dies ist das Ende dieses Artikels darüber, wie Sie CSS verwenden, um das übergeordnete Container-Div mit img-Bildern zu füllen und an die Containergröße anzupassen. Weitere verwandte Informationen dazu, wie Sie CSS verwenden, um den Inhalt des übergeordneten Containers mit img zu füllen, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!