Image 使用高度flexbox调整图像大小

我有一个有图片的专栏。该列有一个有限的高度，我希望所有的图像适合在垂直列。这可能吗？我正在用flexbox进行尝试，但还没有成功

。缩放图像{
溢出：隐藏；
高度：300px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
img{
宽度：自动；
高度：自动；
}

尝试使用CSS calc（）方法。calc（100/容器中的图像数）将调整图像高度，以共享100%的容器高度，该高度将在所有图像中平均分配

。缩放图像{
溢出：隐藏；
高度：300px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
img{
宽度：自动；
高度：计算（100%/4）；
}

如果您希望图像大小相同，则此功能将起作用 要使弹性项收缩到小于其大小，您需要设置

flex-basis:0和
最小高度：0
。
min height:auto
和
flex basis:auto的默认值可以防止弹性项目缩小到小于其大小<代码>弹性增长：1
使项目增长以获得相等的值。但是
img
由于flex项目不会调整大小以保持纵横比，所以我们必须将它们包装起来。演示：


。缩放图像{
高度：300px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.缩放图像>*{
弹性：100；
最小高度：0；
显示器：flex；
}
.缩放图像img{
最大高度：100%；
左边距：自动；
右边距：自动；
}

谢谢您的回答。我曾想过这样做，但有时会出现更少或更多的图像。所以它应该更灵活。我将进一步研究它，它看起来很棒，很好！看起来不错，虽然IE11仍然拒绝按要求显示它们。更不用说边缘了，它没有线索！！差不多了，但IE11看不到高度：300px，显示的是全尺寸图像。边缘、FF、镀铬、维瓦尔第（镀铬底座）都可以。（顺便说一句，删除了我的答案）@RenevanderLende为IE添加了变通方法，至少这会让它看起来比现在更好。