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

Verstehen, warum „Objektanpassung“ in einer Flexbox nicht funktioniert

In dieser Untersuchung besteht das Ziel darin, das „Objekt“ zu nutzen -fit:cover“-Eigenschaft zum Skalieren von Bildern innerhalb von Flexbox-Spalten. Allerdings wurde beobachtet, dass die Bilder unangepasst bleiben. Dieser Artikel erläutert die zugrunde liegende Mechanik und bietet eine Lösung.

Das Prinzip hinter „Object-Fit“

Gemäß der Spezifikation legt „Object-Fit“ fest, wie a Der Inhalt des ersetzten Elements passt in das durch seine Höhe und Breite definierte Feld.

Der Schlüssel Beobachtung

Entscheidend ist, dass sich die Eigenschaft „Objektanpassung“ nicht auf den übergeordneten Container, sondern auf das ersetzte Element selbst (in diesem Fall das Bild) bezieht.

Lösung : Verschachtelung innerhalb des Flex-Elements

Um das Problem zu beheben, sollten die Bilder zu Flex-Elementen werden, anstatt innerhalb des Flex verschachtelt zu werden Behälter.

Überarbeiteter Code

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

<div class="container">
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="Warum funktioniert „Object-Fit' nicht mit Bildern in Flexbox-Spalten?" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="Warum funktioniert „Object-Fit' nicht mit Bildern in Flexbox-Spalten?" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="Warum funktioniert „Object-Fit' nicht mit Bildern in Flexbox-Spalten?" >
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/1920x1080" class="lazy" alt="Warum funktioniert „Object-Fit' nicht mit Bildern in Flexbox-Spalten?" >
</div>

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!