为什么 flexbox 会拉伸我的图像而不是保留纵横比？

Flexbox 有这种行为，它将图像拉伸到它们的自然高度。换句话说，如果我有一个带有子图像的 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>

这是什么原因造成的？