[解決済み】なぜフレックスボックスはアスペクト比を保持せず、画像を引き伸ばすのですか？

質問

Flexbox には、画像を自然な高さに引き伸ばすという動作があります。つまり、フレックスボックス コンテナに子画像を配置し、その画像の幅を変更すると、高さはまったく変更されず、画像は引き伸ばされてしまいます。

div {
  display: flex; 
  flex-wrap: wrap;
}

img {
  width: 50%
}

<div>
    <img src="https://i.imgur.com/KAthy7g.jpg" >
    <h1>Heading</h1>
    <p>Paragraph</p>
</div>

この原因は何ですか？

解決方法は？

伸びているのは align-self デフォルト値は stretch . 設定 align-self から center .

align-self: center;

こちらのドキュメントをご覧ください。 アラインセルフ