Warum funktioniert „object-fit' nicht mit Flexbox-Containern?

Warum Object-Fit in Flexbox nicht funktioniert

Obwohl Probleme mit der Implementierung von Object-Fit in Flexbox aufgetreten sind, wo Bilder enthalten sind Wenn Spalten gleicher Breite nicht angepasst werden, gibt es eine logische Erklärung, die in der Definition der Eigenschaft verwurzelt ist.

Wie in der Spezifikation dargelegt, Die Objektanpassung bestimmt, wie ersetzte Elemente (in diesem Fall Bilder) in den durch ihre Höhe und Breite definierten Rahmen passen. Der entscheidende Punkt ist jedoch, dass es sich bei der Box um das Bild selbst und nicht um seinen Container handelt.

Um das Problem zu lösen, entfernen Sie daher den Container vollständig und weisen Sie den Bildern den Flex-Item-Status direkt zu. wie im aktualisierten Code-Snippet gezeigt:

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

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

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