css - 显示 flex 子元素以自动调整大小以适合父元素

Question

我想为图像制作一个列表并调整它们的大小以适应窗口(如果添加更多图像而不是扩展父 div)。

可以使用 css display:flex 选项或任何其他方式来完成吗？

Here's my fiddle

图像保存 div 及其子元素的 Css

.images{
    background:rgba(14, 11, 10, 0.8);
    display:flex;
    flex:10;
}

.images > img{
     flex:1;
     max-width:100%;
     max-height:100%;
}

正如您在示例中看到的，图像高度没有调整大小，我该如何解决这个问题？

Answer 1

将每个图像添加到单独的 div 中，并相应地更改样式

.images img{
  flex:1;
  max-width:100%;
  max-height:100%;
}