Css 使用flexbox调整图像高度

我正在尝试构建一个包含两行的布局。下一行包含图像，这些图像应适应可用高度

问题是，这些图像改变了它们的高度，但宽度表现得很奇怪。即使我设置了

高度：100%

和

宽度：自动

我为此制作了一支简化笔：

.flexContainer{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.底部{
弹性：0 2 25雷姆；
身高：100%；
最大高度：25雷姆；
显示器：flex；
调整项目：弹性启动；
调整内容：灵活启动；
调整项目：灵活启动；
}
.底部img{
身高：100%；
宽度：自动；
显示：块；
右边距：1rem；
}

内容

我认为您应该从图像中删除flexbox，让它们默认为内联，并使用最大高度：100%：

.flexContainer{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.底部{
弹性：0 2 25雷姆；
身高：100%；
最大高度：25雷姆；
}
.bottom img{
最大高度：100%；
右边距：1rem；
}

内容

.flexContainer{
显示器：flex；
弯曲方向：立柱；
}
保险商实验室{
列表样式：无；
列数：3；
保证金：0；
填充：0；
}
.顶{
背景：红色；
颜色：白色；
字体大小：1.4rem；
填充：1em；
垫底：1米；
垫底：2米；
flex:20自动；
}
.底部{
背景：蓝色；
显示器：flex；
证明内容：之间的空间；
}
.bottom>div:n个子项（2）{
保证金：0.1rem；
}
.底部img{
最大宽度：100%；垂直对齐：顶部；
}

一个
两个
三
四
五
六
七
八
九

您可以用div将每个IMG包装起来。 然后将div高度设置为400px img最大高度为100%

.img包装{ 高度：400px }

.img包装器img{ 最高高度：100%

---

}

谢谢，但是图像没有在左侧对齐。实际上图像是在左侧对齐的，您只是在图像右侧有较大的边距。我需要图像之间的边距不要更改。所以我想这是不可能用对象拟合来实现的。@obs那么我不明白你想要的是什么，图像不能既“在左边”，又有大的右边距……我不想要“大右边距”。对象匹配的问题是，图像容器保持相同的大小，但图像本身会进行调整。但是到下一个图像的距离不会改变。您可以在图像之间留有空白-我希望所有图像始终相互接触，并且背景没有可用空间。当我尝试此操作时，当图像的可用高度小于400px时，图像不会变小。设置<代码>最大高度：100%；最大宽度：100%images@ZohirSalakCeNa我担心这对任何事情都没有帮助希望你检查了我的代码段，你能发送带有消失问题的更新代码段吗？因为图像下方没有显示任何元素，所以底部消失了什么？当我单击“运行代码片段”时，我只看到红色背景，而不是蓝色背景。当我将你的代码应用到我的笔上时也是如此。请查看recordit视频以供参考。谢谢你的努力-以下是我的感受：嗨，我已经更新了代码，你能运行我上面的代码片段吗！