Warum funktioniert meine „Objektanpassung' nicht in Flexbox?

Object-Fit funktioniert nicht in Flexbox: Der Grund und die Lösung

Object-Fit ist eine CSS-Eigenschaft, die steuert, wie die Größe eines Bildes geändert wird um in den Behälter zu passen. In einem Flexbox-Layout kann es jedoch so aussehen, als ob die Objektanpassung nicht wie erwartet funktioniert.

Der Grund dafür ist, dass die Objektanpassung auf das ersetzte Element selbst und nicht auf seinen Container wirkt. In diesem Fall sind die Bilder die ersetzten Elemente, nicht das Wrapper-Div.

Damit die Objektanpassung in Flexbox wie vorgesehen funktioniert, sollten die Bilder zu Flex-Elementen werden. Dadurch legen Sie die Flex-Eigenschaften für die Bilder selbst fest und stellen so sicher, dass die Objektanpassung korrekt angewendet wird.

Hier ist der geänderte Code:

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

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

In diesem aktualisierten Code sind die Bilder sind die Flex-Elemente, und die Objektanpassung wird direkt auf sie angewendet. Jetzt wird die Größe der Bilder so angepasst, dass sie den gesamten Container abdecken und gleichzeitig ihr Seitenverhältnis beibehalten.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine „Objektanpassung' nicht in Flexbox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!