css - 图像作为 flex 元素在 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/