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

Question

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>

这是什么原因造成的？

原文由 sjbuysse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 align-self: center;

请参阅此处的文档： align-self

原文由 pradeep1991singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Dorian 发布，翻译遵循 CC BY-SA 4.0 许可协议