So verwenden Sie CSS, um das übergeordnete Container-Div mit img-Bildern zu füllen und die Containergröße anzupassen

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;
}

Damit ist dieser Artikel darüber, wie Sie CSS verwenden, um das übergeordnete Container-Div mit img-Bildern zu füllen und eine adaptive Containergröße zu erreichen, abgeschlossen. Weitere Informationen dazu, wie Sie CSS verwenden, um Containerinhalte mit img-Bildern zu füllen, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!