Warum ist nicht Objekt-fit arbeiten in flexbox?

Ich habe mehrere Spalten, die ich bin gleicher Breite mit flex. Jedes enthält img tags, und ich möchte diese Bilder zeigen die object-fit: cover Dimensionierung.

CSS:

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

HTML:

<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 Bilder sind nicht Größe ändern, kann man in diese demo. Warum ist das so?

InformationsquelleAutor Jack Guy | 2016-05-10

26

Aus der Spezifikation:

Den object-fit Eigenschaft legt fest, wie der Inhalt eines ersetzt
element angepasst werden soll, um die box aufgebaut, durch seine Höhe und
der Breite.

Der Schlüssel Begriff sein: eingebaut, um die box aufgebaut, durch seine Höhe und Breite

Das Bild wird ersetzt, nicht die container. Und die box aufgebaut, durch seine Höhe und Breite bezieht sich auf das Bild selbst, nicht seine container.

So, Schrott, container und machen die Bilder selbst die flex-items.

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

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
```
HTML:
```
<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. Ändern der Größe von Objekten: object-fit
property

Den object-fit Eigenschaft legt fest, wie der Inhalt eines ersetzt
element angepasst werden soll, um die box aufgebaut, durch seine Höhe und
der Breite.

Hier sind drei Werte:
- cover
  
  Den ersetzten Inhalt ist so bemessen, halten das Seitenverhältnis, während
  Füllung das element wird der gesamte Inhalt box.
- contain
  
  Den ersetzten Inhalt ist so bemessen, halten das Seitenverhältnis, während
  passend zum element-Inhalt box.
- fill
  
  Den ersetzten Inhalt ist so bemessen, füllen Sie den element-Inhalt box.
Mit cover das Bild behält sein Seitenverhältnis und deckt alle verfügbaren Speicherplatz. Mit dieser option viel von einem Bild kann beschnitten werden off-screen.

Mit contain das Seitenverhältnis ist auch gepflegt, aber das Bild skaliert und innerhalb der box. Dies kann dazu führen, Leerraum auf der linken und/oder rechten Seite (hochformat passen), oder oben und/oder unten (Landschaft passen). Die object-position Eigenschaft kann verwendet werden, um verschieben Sie das Bild innerhalb seiner box.

Mit fill das Seitenverhältnis wird aufgegeben und das Bild ist in verschiedenen Größen passend für die box.

Browser-Kompatibilität

Schreiben, object-fit ist nicht von Internet Explorer unterstützt. Für einen workaround siehe:
- Alternativ height: 100%; width: 100% zu machen, die Bilder haben die gleiche Größe wie die flex-items.
- flex: 0 1 für mich gearbeitet
- Hinzufügen overflow: hidden zu den img Erklärung war von entscheidender Bedeutung in meinem Fall.
InformationsquelleAutor Michael_B
14

Das problem ist, dass object-fit gibt an, wie ein Bild gemalt ist, innerhalb der img, aber Sie wollte nicht angeben, die Größe der Elemente, nur die Größen Ihrer .test Eltern.

Also eine alternative zu Die Antwort von Michael_B die Bilder haben die gleiche Größe wie die flex-items:
```
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
```
CSS:
```
.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;
}
```
HTML:
```
<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>
```
- Ich habe schon bemerkt, für einige Zeit jetzt, dass object-fit funktioniert nicht von selbst. In allen Fällen, die ich gesehen habe, height - und / oder width muss angegeben werden, in der gleichen Erklärung. Nichts, über das in der spec. Kann object-fit für sich arbeiten?
- Mit nur einer Größe, die es immer noch funktioniert, aber es ist in der Regel nutzlos. object-fit ist im Grunde nützlich, wenn Sie verkleinert die img element ohne Beachtung der eigentliche Aspekt-Verhältnis. Dann standardmäßig das Bild ist verzerrt (füllen), aber vielleicht möchten Sie das Seitenverhältnis beibehalten, die in unterschiedlicher Weise (enthalten, abdecken). Wenn Sie nur eine Größe der img, die anderen werden berechnet nach dem Seitenverhältnis. Also alle object-fit Werte ergeben das gleiche Ergebnis. Die Ausnahme ist, wenn Sie das erweiterte layout-Techniken wie flexbox zu ändern, die auto-Größe, wenn nach gelöst wurde.
- Ja, das war das problem, wenn ich testen width:100% auf die img im original-code. Es die Größe neu das Bild, aber die object-fit Eigenschaft unbrauchbar wurde. Danke für die Erklärung.
- Ein weiterer Punkt, der nützlich sein kann: ich habe das nicht als height: 100% als eine Allgemeine Lösung für die geschachtelte Bild, denn wenn die container nicht über eine definierte Höhe, Prozentsatz height würde nicht funktionieren, es sei denn, Sie absolut positionieren. Aber es funktioniert in diesem Fall, da die Höhe des Containers definiert.
InformationsquelleAutor Oriol

Für alle, die nicht nur "Schrott, den Behälter und stellen Sie die Bilder selbst die flex-items," fügen Sie einfach die container-Ebenen:

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

InformationsquelleAutor btown

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Weitere Details