Wie kann ich mit dem CSS-Flexbox-Modell ein Bild zwingen, sein Seitenverhältnis beizubehalten?

JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/

Beachten Sie, dass sich die Bilder dehnen oder verkleinern, um die Breite des Containers auszufüllen. Das ist in Ordnung, aber können wir es auch dehnen oder verkleinern lassen, um die Bildproportionen beizubehalten?

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

Wenn Sie für IMG-Tags eine Seite definieren, wird die Größe der anderen Seite geändert, um das Seitenverhältnis beizubehalten, und standardmäßig werden Bilder auf ihre ursprüngliche Größe erweitert.

Wenn Sie diese Tatsache verwenden, wenn Sie jedes img-Tag in ein div-Tag einwickeln und seine Breite auf 100% des übergeordneten div einstellen, entspricht die Höhe dem gewünschten Seitenverhältnis.

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

Um zu verhindern, dass sich Bilder in einem flexiblen Elternteil in einer der Achsen dehnen, habe ich einige Lösungen gefunden.

Sie können versuchen, die Objektanpassung für das Bild zu verwenden, z

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

Oder Sie können flexspezifische Regeln hinzufügen, die in einigen Fällen besser funktionieren.

align-self: center;
flex: 0 0 auto;

Es ist nicht erforderlich, ein enthaltendes div hinzuzufügen.

Die Standardeinstellung für die CSS-Eigenschaft "Align-Items" ist "Stretch". Dadurch werden Ihre Bilder auf ihre volle ursprüngliche Höhe gedehnt. Wenn Sie die CSS-Eigenschaft "align-items" auf "flex-start" setzen, wird Ihr Problem behoben.

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

Die meisten Bilder mit intrinsischen Abmessungen , dh einer natürlichen Größe, wie ein jpegBild. Wenn die angegebene Größe sowohl die Breite als auch die Höhe definiert, wird der fehlende Wert anhand des Eigenverhältnisses ermittelt ... - siehe MDN .

Dies funktioniert jedoch nicht wie erwartet, wenn die Bilder, soweit ich weiß , mit dem aktuellen Flexible Box Layout Module Level 1 als direkte Flex-Elemente festgelegt werden .

Sehen Sie sich diese Diskussionen an und Fehlerberichte könnten verwandt sein:

• Flexbugs # 14 - Chrome / Flexbox Intrinsic Sizing ist nicht korrekt implementiert.
• Firefox Bug 972595 - Flex-Container sollten "Flex-Basis" anstelle von "Breite" verwenden, um die intrinsischen Breiten von Flex-Elementen zu berechnen
• Chromium Issue 249112 - Lassen Sie in Flexbox intrinsische Seitenverhältnisse zu, um die Berechnung der Hauptgröße zu informieren.

Um dieses Problem zu umgehen, können Sie jedes <img>mit einem <div>oder einem <span>oder so umschließen.

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5 Implizite Mindestgröße von Flex-Elementen

Um eine angemessene Standardmindestgröße für bieten flex Produkte , stellt diese Spezifikation einen neuen Autowert als Anfangswert der min-width und min-height Eigenschaften definiert in CSS 2.1.

Alternativ können Sie tablestattdessen das CSS- Layout verwenden, mit dem Sie ähnliche Ergebnisse flexboxerzielen, da es auch für IE8 in mehr Browsern funktioniert.

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

Ich habe in letzter Zeit mit Flexbox herumgespielt und bin durch Experimente und die folgenden Überlegungen zu einer Lösung gekommen. In Wirklichkeit bin ich mir jedoch nicht sicher, ob genau das passiert.

Wenn die tatsächliche Breite durch das Flex-System beeinflusst wird. Nachdem die Breite der Elemente die maximale Breite des übergeordneten Elements erreicht hat, wird die in CSS festgelegte zusätzliche Breite ignoriert. Dann ist es sicher, die Breite auf 100% einzustellen.

Da die Höhe des img-Tags vom Bild selbst abgeleitet wird, kann das Setzen der Höhe auf 0% etwas bewirken. (Hier ist mir unklar, was ... aber es machte für mich Sinn, dass es das Problem beheben sollte)

DEMO

(Denken Sie daran, es hier zuerst gesehen zu haben!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

Funktioniert noch nur in Chrom

Dieses Verhalten wird erwartet. Der Flex-Container streckt standardmäßig alle seine untergeordneten Elemente. Bild haben keine Ausnahme. (dh Eltern haben align-items: stretchEigentum)

Um das Seitenverhältnis beizubehalten, haben wir zwei Lösungen:

1. Ersetzen Sie entweder die Standardeigenschaft align-items: stretchdurch align-items: flex-startoder align-self: centerusw., http://jsfiddle.net/e394Lqnt/3/

oder

2. Set align Eigenschaft ausschließlich für das Kind selbst: wie, align-self: centeroder align-self: flex-startusw. http://jsfiddle.net/e394Lqnt/2/

Eigentlich habe ich herausgefunden, dass der Container des Bild-Tags eine Höhe haben muss, um das Verhältnis des Bildes beizubehalten. zum Beispiel>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

dann wird Ihr Container in Ihrem HTML das Tag-Bild umschließen

<div class="container"><img src="image.jpg" alt="image" /></div>

Dies funktioniert für IE und andere Browser

Ich hatte gerade das gleiche Problem. Verwenden Sie die Flex-Ausrichtung, um Ihre Elemente zu zentrieren. Sie müssen align-items: centeranstelle von verwenden align-content: center. Dadurch wird das Seitenverhältnis beibehalten, während bei der Ausrichtung des Inhalts das Seitenverhältnis nicht beibehalten wird.