Warum streckt Flexbox mein Bild, anstatt das Seitenverhältnis beizubehalten?

156

Flexbox hat dieses Verhalten, bei dem Bilder auf ihre natürliche Höhe gedehnt werden. Mit anderen Worten, wenn ich einen Flexbox-Container mit einem untergeordneten Bild habe und die Breite dieses Bildes verändere, wird die Größe überhaupt nicht geändert und das Bild wird gestreckt.

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}
<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>
Erweitern Sie das Snippet

Was verursacht das?

Ich habe diesen CodePen hinzugefügt, um zu demonstrieren, was ich meine.

html css flexbox sjbuysse
quelle
5
In Firefox und IE funktioniert gut. In Chrome können Sie mit align-self:flex-start im Bild beheben . Ich weiß nicht warum, vielleicht ist der Standardwert in Chrom Stretch.
2
Hinzufügen von Höhe: 100%; Um das Problem zu beheben, möchte ich wissen, warum es auch das Bild streckt.
Paran0a
3
@blonfu, der Standardwert in allen Browsern ist align-items: stretch/ align-self: stretch. Wenn Sie einen Rahmen um jedes Element hinzufügen und entfernen wrap, werden Sie feststellen, dass sich alle Elemente in allen Browsern erstrecken: codepen.io/anon/pen/oLXBVx?editors=1100
Michael Benjamin
Ok. Ich lerne das, aber mit Bildern funktioniert es anders in Chrome und im anderen Browser. Chrome respektiert das Seitenverhältnis nicht, wenn Sie die Höhe nicht definieren.
@blonfu, ja. Keine Frage, es gibt Browser-Inkonsistenzen und detailliertere Ebenen.
Michael Benjamin

Antworten:

365

Es wird gedehnt, weil der align-selfStandardwert ist stretch. Set align-selfzu center.

align-self: center;

Siehe Dokumentation hier: align-self

pradeep1991singh
quelle
Ja, aber der andere Browser behält das Seitenverhältnis in den Bildern bei. Chrome noch wendet Flex-Basis in img
9
Ich denke, dies align-self: start;könnte eine stärkere Antwort sein, da Bilder vertikal an der Oberseite ihrer Container (nicht in der Mitte) ausgerichtet werden sollten, wie dies bei jedem stillosen Bild (kein CSS) der Fall wäre. In beiden Fällen beheben beide Antworten die Dehnung. Es kommt also natürlich darauf an, was OP will - habe diesen "vertikal zentrierten" Eindruck einfach nicht von OPs Post bekommen.
Kröte
Wenn Sie keine Breite für ein Bild definieren und es sich in einem Flex-Container befindet, wird es auf 100% gedehnt. align-self: [flex-start, center...others]verhindert, dass das Bild 100% der Breite der Flex-Container einnimmt. align-self:centerbehebt es natürlich, aber wenn Sie möchten, dass Ihr Bild am Anfang oder Ende der Containernutzung align-items: flex-start or flex-end
beginnt
1
Sie können align-items: centerdem Elternteil auch eine beliebige Ausrichtung (oder eine Ausrichtung, die Ihren Anforderungen entspricht) hinzufügen.
Electrovir
16

Das Schlüsselattribut ist align-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}
<div class="container">
    <p>Without align-self:</p>
    <img src="http://i.imgur.com/NFBYJ3hs.jpg" />
    <p>With align-self:</p>
    <img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>
Erweitern Sie das Snippet

Dorian
quelle
1

Ich hatte das gleiche Problem mit einem Foundation-Menü. align-self: center;hat bei mir nicht funktioniert.

Meine Lösung bestand darin, das Bild mit einem zu versehen <div style="display: inline-table;">...</div>

Isapir
quelle
2
Es geht aber um Flexbox.
Dies ist eine Lösung für Flexbox. Das Bild und div befinden sich in einem Flexbox-Container.
Isapir
0

Hinzufügen margin, um Bilder auszurichten:

Da wir das wollten imagesein left-aligned, haben wir:

img {
  margin-right: auto;
}

Ebenso imagekönnen right-alignedwir hinzufügen margin-right: auto;. Das Snippet zeigt eine Demo für beide Arten der Ausrichtung.

Viel Glück...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}
<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>
Erweitern Sie das Snippet

Akash
quelle
0

Es wird gedehnt, da der Standardwert für "Ausrichtung selbst" "Dehnen" ist. Für diesen Fall gibt es zwei Lösungen: 1. setze img align-self: center ODER 2. setze übergeordnete align-items: center

img {

   Selbst ausrichten: Mitte
}}

ODER 

.elternteil {
  Elemente ausrichten: Mitte
}}
Mohamed Ali
quelle