为什么flexbox拉伸我的形象？

Flexbox具有将图像拉伸到自然高度的行为。 在其他（更具体）的话，如果我有一个带有子图像的flexbox容器，并调整该图像的宽度，高度根本不调整，图像被拉伸。

<div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> 

和这个样式表

 div { display: flex; flex-wrap: wrap; } img{ width: 50% } 

我加了这个codepen来说明我的意思。 这是什么原因？

Answer 1

它正在伸展，因为align-self默认值是stretch 。 将align-self设置为center 。

 align-self: center 

请参阅文档： 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> 

Answer 3

我遇到了与基金会菜单相同的问题。 align-self: center; 没有为我工作。

我的解决scheme是用<div style="display: inline-table;">...</div>封装图片