将响应式图像与 Flexbox 一起使用

Question

我想使用弹性框和响应式图片（带有scrset 和sizes 的图片）。但结果似乎很可怕。即使我使用flex-grow 拉对齐，图像也有不同的高度，因为浏览器会加载不同大小的不同图像。我希望所有图像的高度都相同。

我发现sizes 的图像如果我使用 flexbox 很难设置，这是不可预测的。有没有办法解决这个问题？

Here 是 JSfiddle（请将结果窗口的大小调整为更大，我为flex-grow 使用了内联 css）

Answer 1

将图像高度属性设置为：

height:100%;

如果你想让你的所有图片大小相同，请为 flex-grow 设置相同的值。

flex-grow:1;