webentwicklung-frage-antwort-db.com.de

Warum funktioniert object-fit in flexbox nicht?

Ich habe mehrere Spalten, die ich mit Flex gleich breit mache. Jedes enthält img-Tags, und ich möchte, dass diese Bilder die object-fit: cover-Größe aufweisen.

.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 ändert sich nicht, wie in dieser Demo zu sehen ist. Warum das?

htmlcsscss3flexbox
15
Jack Guy

Aus der Spezifikation :

Die object-fit-Eigenschaft gibt an, wie der Inhalt eines ersetzten Das Element sollte an der Box angebracht werden, die durch die verwendete Höhe und .__ bestimmt ist. Breite.

Der Schlüsselbegriff lautet: wird durch die verwendete Höhe und Breite an der Box angebracht

Das Bild wird ersetzt, nicht der Container. Die durch die verwendete Höhe und Breite festgelegte Box bezieht sich auf das Bild selbst, nicht auf den Container.

Verschrotten Sie also den Behälter und machen Sie die Bilder selbst zu den Flex-Elementen.

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

Überarbeitete Codepen

Weitere Details

5.5. Größenanpassung von Objekten: der object-fit Eigentum

Die object-fit-Eigenschaft gibt an, wie der Inhalt eines ersetzten Das Element sollte an der Box angebracht werden, die durch die verwendete Höhe und .__ bestimmt ist. Breite.

Hier sind drei der Werte:

  • cover

    Der ersetzte Inhalt ist so bemessen, dass das Seitenverhältnis beibehalten wird, während Füllen des gesamten Inhaltsfelds des Elements.

  • contain

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

  • fill

    Der ersetzte Inhalt hat die Größe, um das Inhaltsfeld des Elements zu füllen.

Mit cover behält das Bild sein Seitenverhältnis bei und deckt den gesamten verfügbaren Platz ab. Mit dieser Option wird ein großer Teil des Bildes möglicherweise außerhalb des Bildschirms abgeschnitten.

Mit contain wird auch das Seitenverhältnis beibehalten, das Bild wird jedoch so skaliert, dass es in die Box passt. Dies kann zu Leerzeichen auf der linken und/oder rechten Seite (Hochformat) oder oben und/oder unten (Querformat) führen. Die object-position-Eigenschaft kann verwendet werden, um das Bild innerhalb des Felds zu verschieben.

Mit fill wird das Seitenverhältnis aufgegeben und das Bild wird an die Box angepasst.

Browserkompatibilität

Zum jetzigen Zeitpunkt wird object-fit nicht von Internet Explorer unterstützt. Für eine Problemumgehung siehe:

21
Michael_B

Das Problem ist, dass object-fit angibt, wie ein Bild in der img gezeichnet wird, Sie haben jedoch nicht die Größe dieser Elemente angegeben, sondern nur die Größe ihrer .test-übergeordneten Elemente.

Eine Alternative zu Michael_Bs Antwort macht die Bilder so groß wie die Flex-Elemente:

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>

12
Oriol

Für alle, die nicht einfach "den Container ausrangieren und die Bilder selbst zu Flex-Elementen machen", 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">
0
btown