Warum dehnt die Flexbox mein Bild?
Flexbox weist dieses Verhalten auf, bei dem Bilder auf ihre natürliche Höhe gedehnt werden. Mit anderen (genaueren) Worten: Wenn ich einen Flexbox-Container mit einem untergeordneten Bild habe und die Breite dieses Bildes verändere, ändert sich die Höhe überhaupt nicht und das Bild wird gestreckt.
<div>
<img src="https://loremflickr.com/400/300" >
<h4>Appify</h4>
<p> some text </p>
</div>
Und dieses Stylesheet
div {
display: flex;
flex-wrap: wrap;
}
img{
width: 50%
}
Ich fügte hinzuDieser Codepen um zu demonstrieren, was ich meine. Wodurch wird das verursacht?