Warum funktioniert die Objektanpassung in Flexbox nicht?

Ich habe mehrere Spalten, denen ich mit Flex die gleiche Breite gebe. Jeder enthält img -Tags, und ich möchte, dass diese Bilder die zeigen object-fit: cover Dimensionierung.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  object-fit: cover;
}

<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

Die Größe der Bilder wird nicht geändert, wie in zu sehen ist diese demo. Warum ist das so?

Von dem Spezifikation:

Die object-fit Die Eigenschaft gibt an, wie der Inhalt eines ersetzten Elements in die Box eingepasst werden soll, die durch seine verwendete Höhe und Breite festgelegt wird.

Der Schlüsselbegriff lautet: passend zu der durch seine verwendete Höhe und Breite festgelegten Box

Das Bild wird ersetzt, nicht sein Container. Und die durch ihre verwendete Höhe und Breite festgelegte Box bezieht sich auf das Bild selbst, nicht auf seinen Container.

Verschrotten Sie also den Container und machen Sie die Bilder selbst zu Flex-Items.

.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>

Überarbeiteter Codepen

Zusätzliche Details

5.5. Größenbestimmung von Objekten: die object-fit
Eigentum

Die object-fit Die Eigenschaft gibt an, wie der Inhalt eines ersetzten Elements in die Box eingepasst werden soll, die durch seine verwendete Höhe und Breite festgelegt wird.

Hier sind drei der Werte:

• cover

  Der ersetzte Inhalt wird so bemessen, dass sein Seitenverhältnis beibehalten wird, während die gesamte Inhaltsbox des Elements ausgefüllt wird.

• contain

  Der ersetzte Inhalt wird so bemessen, dass sein Seitenverhältnis beibehalten wird, während er in die Inhaltsbox des Elements passt.

• fill

  Der ersetzte Inhalt wird so bemessen, dass er die Inhaltsbox des Elements ausfüllt.

Mit cover Das Bild behält sein Seitenverhältnis bei und deckt den gesamten verfügbaren Platz ab. Mit dieser Option kann ein Großteil eines Bildes außerhalb des Bildschirms beschnitten werden.

Mit contain Das Seitenverhältnis wird ebenfalls beibehalten, aber das Bild wird so skaliert, dass es in die Box passt. Dies kann zu Leerzeichen links und/oder rechts (Hochformat) oder oben und/oder unten (Querformat) führen. Die object-position -Eigenschaft kann verwendet werden, um das Bild innerhalb seiner Box zu verschieben.

Mit fill Das Seitenverhältnis wird aufgegeben und das Bild wird so bemessen, dass es in die Box passt.

Browser-Kompatibilität

Zum jetzigen Zeitpunkt object-fit wird vom Internet Explorer nicht unterstützt. Eine Problemumgehung finden Sie unter:

• Netter Trick für CSS object-fit Fallback auf Edge (und andere Browser)
• fitie – Ein object-fit Polyfill für Internet Explorer
• object-fit-images – Fügt Unterstützung für hinzu object-fit auf IE9, IE10, IE11, Edge und anderen alten Browsern
• Polyfill (meistens IE) für CSS object-fit -Eigenschaft zum Ausfüllen/Einpassen von Bildern in Container.

Das Problem ist, dass object-fit gibt an, wie ein Bild in die gezeichnet wird imgaber Sie haben nicht die Größe dieser Elemente angegeben, sondern nur die Größe ihrer .test Eltern.

Eine Alternative zur Antwort von Michael_B besteht also darin, dass die Bilder dieselbe Größe wie die Flex-Elemente haben:

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

Für alle, die nicht einfach “den Container verschrotten und die Bilder selbst zu Flex-Items machen können”, fügen Sie einfach Containerebenen hinzu:

<div class="display-flex">
  <div class="flex-grow position-relative">
    <div class="pos-absolute top-left-right-bottom-0">
      <img class="object-fit-cover height-width-100">

Als Unterstützung für die object-fit Funktionalität für Ihre Bilder in nicht kompatiblen Browsern können Sie eine CSS-Klasse mit erstellen background-image und background-size. Damit es den belegten Platz richtig berechnet, wickeln Sie ein ein img Element und machen es unsichtbar. Beispiel unten.

HTML

<div class="my-image">
    <img src="path/to/my/image"/>
</div>

CSS

.my-image {
    background-image: url('path/to/my/image');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.my-image > img {
    visibility: hidden;
}

Wenn die <img/> gespannt ist 100% im IE11 dann hinzufügen flex-shrink: 0 auf der <img/> selbst, wie hier empfohlen: Flexbox auf IE11: Bild ohne Grund gestreckt?