Javascript 如何在一个div中均匀显示多个图像

我正在尝试创建一个照片库应用程序，但遇到了一些障碍。我想让每个图像占据div的相等部分，例如，如果有两个图像，每个图像占据div的50%，如果有三个图像，每个图像占据div的33.33%，等等。此外，有没有一种方法可以通过css将这些图像格式化为正方形

此外，我还有照片库div，其中包含h2和照片库内容div。目前，我正在硬编码照片库内容div的高度，以适应父div，但是否有办法使该div获取其父div的剩余高度

最终，我希望使用React动态渲染图片，因此任何关于这方面的建议/建议也会有很大帮助

这是我的密码：

#照片{
宽度：634px；
高度：339px；
}
.照片库{
宽度：634px；
高度：275.03px；
}
.照片库标题{
字体大小：24px；
字体大小：粗体；
线高：32px；
颜色：#333333；
边框底部：1px实心#e1e1；
填充底部：16px；
利润率：0.16px 0；
显示器：flex；
证明内容：之间的空间；
}
.照片库内容{
高度：200px；
}
.照片库布局{
高度：200px；
溢出：隐藏；
浮动：左；
显示器：flex；
保证金：0；
填充：0；
}
.照片库布局李{
高度：自动；
浮动：左；
列表样式：无；
显示器：flex；
}
.照片{
显示：内联flex；
空白：nowrap；
}
.照片img{
最大宽度：100%；
最大高度：自动；
显示：内联块；
垂直对齐：中间对齐；
}

2张照片

我使用了您的HTML并编写了一些CSS来演示如何：

使用flexbox将任意数量的项目以相等的宽度放在一行中（

display:flex

在父项上，而

flex:1

在子项上）

有