Html img流体未正确调整图像高度的大小

我正在使用Bootstrap4，并尝试创建一个由4个图像组成的网格，2个在顶部，2个在底部。我使用的是

img fluid

类，但是图像会根据宽度调整大小，这只会使图像高度过大，并且会被切断。我尝试设置

最大高度：100%

，但没有成功

怎么了

.images容器{
高度：95vh；
}
.导航按钮{
宽度：100%；
身高：50%；
保证金：自动；
字号：5em；
颜色：黑色；
}
.footer容器{
文本对齐：居中；
}
.底部导航箱{
字号：1.5em；
保证金：0；
}
.sim卡图像{
最大高度：100%；
}
我{
保证金：自动；
}
身体{
身高：100%；
}
html{
身高：100%；
}
页脚{
高度：5vh；
}

---

我不能100%确定我是否正确解释了这个问题，但是如果你想要一个2×2的图像网格，那么你应该能够像这样相对快速地完成它

html:

<div class="panel">
     <img src="blah" />
     <img src="blah" />
     <img src="blah" />
     <img src="blah" />
</div>

.panel {
     width = whateversizeyouwant;
     height = whateversizeyouwant;
     display: flex; 
     flex-wrap: wrap;    //the flex stuff should make it display 2×2
}

.panel > img {
     width: 50%;
     height: 50%;
}

这应该适用于任何一组4幅图像

---

如果希望它们保持相同的纵横比，请在

.panel>img

set

height:auto

下。请记住，这不会给您一个完美的正方形，

面板的大小将影响图像的大小。
图像的大小是多少？您希望图像保持相同的纵横比吗？图像为875x656。我希望他们保持相同的纵横比，我看不到图像被切断。你能提供你所看到的东西的屏幕截图吗？你在用哪个浏览器？这就解决了我的问题。看来我对这个问题想得太多了。带有图像的简单div工作得非常好。无需引导。