img-fluid not correctly resizing image height - html

Question

I am working with Bootstrap 4 and am trying to have a grid of 4 images, 2 on top and 2 on bottom. I am using the img-fluid class but the image resizes based on the width only making the image height too large and it is getting cut off. I tried setting max-height: 100% but that didn't work.
What's going wrong?
.images-container {
height: 95vh;
}
.nav-button {
width: 100%;
height: 50%;
margin: auto;
font-size: 5em;
color: black;
}
.footer-container {
text-align: center;
}
.bottom-nav-box {
font-size: 1.5em;
margin: 0;
}
.sim-image {
max-height: 100%;
}
i {
margin: auto;
}
body {
height: 100%;
}
html {
height: 100%;
}
footer {
height: 5vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-10 h-100 center-container">
<div class="row images-container">
<div class="row top-images-row h-50">
<div class="w-50 d-inline-block image-div">
<img src="https://lorempixel.com/875/656/" class="sim-image" id="simulatorImageTopLeft">
</div>
<div class="w-50 d-inline-block image-div" id="simulatorImageTopRight">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageTopRight">
</div>
</div>
<div class="row bottom-images-row h-50">
<div class="col image-div center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomLeft">
</div>
<div class="col image-div center-block text-center">
<div class="row">
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Not 100% sure I'm interpreting the question correctly, but if you want a 2×2 grid of images then you should just be able to do it relatively quick like this;
html:
<div class="panel">
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
</div>
css:
.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%;
}
That should work for any set of 4 images.
If you want them to stay the same aspect ratios then under .panel > img set height: auto. Keep in mind this won't give you a perfect square, and the size of the panel div will impact how the images can be sized.