图像作为不在Chrome中使用最大宽度缩放的弹性项目

Question

我在flex容器中有一个图像。

图片在Chrome中保持原始高度，不会按比例调整大小。但它适用于Firefox。

<figure>
 <img src="image.jpg">
 <a href="#">A link to somewhere</a>
</figure>

figure {
 display: flex;
 width: 100%;
}

figure img {     
 max-width: 50%;
 height: auto;
}

Answer 1

默认情况下，Flex使其子项的高度相等。要禁用此行为，您可以指定align-items: flex-start。

https://jsfiddle.net/3s2hLv92/1/