Html 响应型Flexbox图像网格

我无法使我的一幅图像正确对齐。我已经完成了大部分的对齐

垂直对齐：中间和显示<代码>显示：块删除底部填充的选项。我还将容器设置为
width:100%以及图像
宽度：100%所以它应该是响应的。我不确定是什么原因造成了这张图片的空白。我已经将背景颜色设置为黄色，因此它显示了需要填充的区域。我还注释掉了我尝试的所有备选方案，但没有成功

例如：


*{
框大小：边框框；
字体大小：100%；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
最大宽度：90%；
保证金：0自动；
背景色：白色；
}
.img___容器{
显示器：flex；
/*证明内容：之间的空间*/
对齐内容：居中对齐；
背景：黄色；
}
a.img_项目{
宽度：100%；
高度：自动；
垂直对齐：中间对齐；
/*显示：块*/
/*柔性生长：1；
弹性收缩：0；
弹性基础：自动*/
}
.img_第1项，
.img_第3项，
.img_项目2{
宽度：33.33%；
}
.img_第4项，
.img_第5项{
宽度：50%；
}
.img_项目img{
垂直对齐：中间对齐；
/*显示：块*/
最大宽度：100%；
}
问题在于，您试图将不同宽高比的图像放入相同大小的框中（我之所以说图像，是因为前两张图像的底部似乎有1个像素的间隙。）

你的选择是：

在CMS端将所有图像裁剪为相同大小

或

将图像附加为内联背景图像，并在CSS文件中将
背景大小设置为
封面
，将
背景位置设置为
居中
。其他一些事情你也需要调整。如果您对这种方法感兴趣，请在评论中告诉我，我可以用一个片段编辑我的答案

编辑

背景图片（为了简洁起见，我只做了一张）：
*{
框大小：边框框；
字体大小：100%；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
最大宽度：90%；
保证金：0自动；
背景色：白色；
}
.img___容器{
显示器：flex；
对齐内容：居中对齐；
背景：黄色；
}
.img_项目{
背景尺寸：封面；
背景位置：中心；
}
.img_第4项，
.img_第5项{
宽度：50%；
}
.img_项目img{
垂直对齐：中间对齐；
最大宽度：100%；
}
问题在于，您试图将不同宽高比的图像放入相同大小的框中（我之所以说图像，是因为前两张图像的底部似乎有1个像素的间隙。）

你的选择是：

在CMS端将所有图像裁剪为相同大小

或

将图像附加为内联背景图像，并在CSS文件中将
背景大小设置为
封面
，将
背景位置设置为
居中
。其他一些事情你也需要调整。如果您对这种方法感兴趣，请在评论中告诉我，我可以用一个片段编辑我的答案

编辑

背景图片（为了简洁起见，我只做了一张）：
*{
框大小：边框框；
字体大小：100%；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
最大宽度：90%；
保证金：0自动；
背景色：白色；
}
.img___容器{
显示器：flex；
对齐内容：居中对齐；
背景：黄色；
}
.img_项目{
背景尺寸：封面；
背景位置：中心；
}
.img_第4项，
.img_第5项{
宽度：50%；
}
.img_项目img{
垂直对齐：中间对齐；
最大宽度：100%；
}

我尝试将图像设置为背景图像。我发现结果在调整大小时有很多移动。我可能做得不对，请告诉我。我想为图像调整大小，因为我目前有它。我喜欢调整页面大小时它们的外观。示例（背景图像）：请参阅我的编辑：）我没有注意到您所指的移动。为了填充空间，必须对图像进行裁剪。谢谢您的编辑。当我试图用背景图像更新所有代码并更新CSS的背景大小和背景位置时，图像崩溃了。你将如何解决这个问题，再次感谢你的帮助这已经让我疯狂了6个小时。啊，是的，对不起。添加一个带有百分比值的
填充底部（参见我的第二次编辑）（对于较小的三行为22%，对于两行为33%左右）可以使您接近原始示例。上面的某个地方有一个问题和答案，可以解释这是如何/为什么工作的。让我看看我能不能把它挖出来。我们在这里：我确实试图把这些图像设置为背景图像。我发现结果在调整大小时有很多移动。我可能做得不对，请告诉我。我想为图像调整大小，因为我目前有它。我喜欢调整页面大小时它们的外观。示例（背景图像）：请参阅我的编辑：）我没有注意到您所指的移动。为了填充空间，必须对图像进行裁剪。谢谢您的编辑。当我试图用背景图像更新所有代码并更新CSS的背景大小和背景位置时，图像崩溃了。你将如何解决这个问题，再次感谢你的帮助这已经让我疯狂了6个小时。啊，是的，对不起。添加一个带有百分比值的
填充底部（参见我的第二次编辑）（对于较小的三行为22%，对于两行为33%左右）可以使您接近or