Warum funktioniert Object-Fit nicht mit Bildern in Flexbox-Spalten?

Objektanpassung funktioniert in Flexbox nicht: Enthüllung der Ursache

Wenn Sie Flexbox verwenden, um gleich große Spalten mit Bildern zu erstellen, wenden Sie die Objektanpassung an. Die Eigenschaft „fit“ für diese Bilder mag logisch erscheinen, um die gewünschte „Cover“-Größe zu erreichen. Allerdings führt diese Technik häufig nicht zu den erwarteten Ergebnissen.

Laut Spezifikation regelt die Eigenschaft „object-fit“, wie der Inhalt eines ersetzten Elements (in diesem Fall das Bild) innerhalb der definierten Box angepasst wird durch seine verwendete Höhe und Breite. Das bedeutet, dass das Bild selbst Gegenstand der Größenänderung ist, nicht sein Container.

Um diese Eigenschaft wirksam zu machen, müssen wir unser Flexbox-Setup umstrukturieren. Anstatt die Bilder in Container-Divs zu verpacken, konvertieren wir die Bilder selbst in Flex-Elemente. Dadurch kann die Objektanpassungseigenschaft auf jedes einzelne Bild wirken und so den gewünschten „Cover“-Effekt erzielen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Object-Fit nicht mit Bildern in Flexbox-Spalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!