Wie ein Bild vertikal in einem Flex-Container mit Richtung passen: Spalte

Question

Ich versuche, ein Bild vertikal in einem Flex-Container, der eine bestimmte Höhe hat passen.

Die flex-direction ist column, und das Bild ist in einer flex-item mit flex-basis: 100% enthalten.

Zusätzlich ist das Bild max-height100%.

Wie Sie im Beispiel sehen können, passt das Bild nicht in den roten Container.

#container { 
 
    background-color: red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 200px; 
 
    width: 320px; 
 
    justify-content: space-between; 
 
} 
 

 
#container > * { 
 
    padding: 5px; 
 
} 
 

 
#img { 
 
    flex: 0 1 100%; 
 
    /* height: 100%; */ 
 
} 
 
img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
}

<div id="container"> 
 
    <div id="img"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img&w=340&h=500"> 
 
    </div> 
 
    <div> 
 
     Something else 
 
    </div> 
 
</div>

soll nicht das Bild schrumpft vertikal in den Flex Behälter passen, gemäß der Spezifikation?

Die Problemumgehung, die ich gefunden habe, ist die height von #img zu 100%, aber ich habe das Gefühl, dass es nicht so ist, wie es gemacht werden sollte.

Als eine zusätzliche Anmerkung, wenn ich flex-direction: row auf den Container festlegen, passt es das Bild horizontal (das ist das Verhalten, das ich erwarten würde).

Answer 1

Sie schrieb:

Die Abhilfe, die ich gefunden ist, die Höhe von #img-100% einzustellen, aber ich habe das Gefühl, dass es ist nicht so, wie es getan werden soll.

Eigentlich ist es ist die Art, wie es getan werden sollte. Die vorherrschende Implementierung der Spezifikation erfordert, dass die height -Eigenschaft auf das übergeordnete Element angewendet wird, wenn prozentuale Höhen für das untergeordnete Element verwendet werden. (. Obwohl diese langsam entwickelt sich weiter Meine zweite Referenz unten.)

Referenzen:

• Working with the CSS height property and percentage values
• Heights rendering differently in Chrome and Firefox (enthält alternative Lösungen)
• CSS height property definition (W3C)

Answer 2

versuchen Sie diese CSS. es funktioniert gut.

#container { 
    background-color: red; 
    /*display: flex;*/ 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 200px; 
    width: 320px; 
    justify-content: space-between; 
} 

#img { 
    height: 85%; 
    width: 100%; 
} 

Answer 3

Für Irgendein Grund, ich konnte nicht das Verhalten bekommen (wahrscheinlich, weil es ein replaced element ist). Also entfernte ich es und benutzte das .img div mit einem Bild als Hintergrund.

Relevante Änderungen

.container { 
... 
    justify-content: center; 
    align-items: center; 
} 

.img { 
    flex: 1 0 auto; 
    background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat; 
    background-size: contain; 
    background-position: center; 
    width: 100%; 
} 

SNIPPET

.container { 
 
    background-color: red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 200px; 
 
    width: 320px; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.container > * { 
 
    padding: 5px; 
 
} 
 
.somethingElse { 
 
    outline: 1px dashed yellow; 
 
    background: rgba(128,0,255,.3); 
 
    color: white; 
 
} 
 
.img { 
 
    flex: 1 0 auto; 
 
    background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat; 
 
    background-size: contain; 
 
    background-position: center; 
 
    width: 100%; 
 
}

<figure class="container"> 
 
    <div class="img"> 
 

 
    </div> 
 

 
    <figcaption class="somethingElse"> 
 
    True Dimentions: 512 x 512 px 
 
    </figcaption> 
 
</figure>