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

Warum funktioniert object-fit nicht in Flexbox?

Beim Versuch, die Eigenschaft „object-fit: cover“ auf Bilder in Flexbox-Spalten anzuwenden, kann es vorkommen, dass Benutzer auf Folgendes stoßen: Problem mit Bildern, deren Größe sich nicht wie erwartet ändert. Die Erklärung liegt in den Spezifikationen der Eigenschaft „object-fit“.

Gemäß den CSS-Spezifikationen bestimmt „object-fit“ die Einpassung des ersetzten Elementinhalts in die durch seine verwendete Höhe und Breite festgelegte Box. Bei Bildern ist das ersetzte Element das Bild selbst, nicht sein Container. Daher gilt die Objektanpassungseigenschaft für die eigene Höhe und Breite des Bildes und nicht für die Abmessungen des Flex-Elements.

Lösung:

Um dieses Problem zu beheben, strukturieren Sie das neu Flexbox-Setup so, dass die Bilder selbst zu Flex-Elementen werden. Dadurch kann die Objektanpassungseigenschaft effektiv auf die Bilder angewendet werden, was zu dem gewünschten Größenänderungsverhalten führt.

.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="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

Indem die Bilder zu flexiblen Elementen gemacht werden, kann die Objektanpassungseigenschaft jetzt ordnungsgemäß angewendet werden Passen Sie die Bilder in den zugewiesenen Flex-Containerraum ein, was zu dem gewünschten Cover-Größenverhalten führt.

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