为什么flexbox会拉伸我的图像？

Question

Flexbox具有将图像拉伸到其自然高度的行为.在其他(更具体的)单词中,如果我有一个带有子图像的flexbox容器,并且我调整了该图像的宽度,则高度根本不会调整大小并且图像会被拉伸.

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>

我添加了这个codepen来演示我的意思.是什么导致这个？

Answer 1

它是拉伸的,因为align-self默认值是stretch.设置align-self为center.

align-self: center;

请参阅doc: align-self

Answer 2

关键是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>