Bootstrap img-responsive not scaling to parent - html

Question

I'm trying to get some images to scale responsively in their parent container using the Bootstrap img-responsive class, but it's not going well. In this scenario, I want to display between 2 and 4 images in a grid pattern on the screen, and for the images to be responsive inside of their parent div.
The problem is that the images don't shrink with the img-container class.
https://jsfiddle.net/fcLv3750/2/
HTML
<div class="container-fluid">
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
CSS
.row-container {
background-color: red;
padding: 5px;
max-height: 50%;
height: auto;
}
.img-container {
padding: 4px;
max-height: 100%;
border: 5px;
border-color: black;
border-style: solid;
}
.col-sm-6 {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.row-inner {
background-color: orange;
height: 50vh; //I want the page contents to resize based on browser window height (no scrolling)
width: auto;
}
NOTE: The following will make the images become responsive, but it throws off the grid by making the img-container the full height of the row, which I prefer not to do. (I do not want the img-container height to be 100%)
https://jsfiddle.net/bm83ts0p/2/
.img-container {
padding: 4px;
height: 100%; //changed from max-height:100%
border: 5px;
border-color: black;
border-style: solid;
}
img{
max-height: 100%
}
A) What is causing the img-responsive class to be ignored?
B) What can I do to make the images responsive, and the img-container div not be 100% height.
EDIT: A key feature is that the content be resized to the browser window with no scrolling, hence the height: 50vh; for each of the 2 rows.
EDIT2: Here is the desired result (which only works when the images are at max-resolution with no scaling. Large images or smaller browser window produce the problems listed above)

Answer 1

I have deleted your wrapper "row-inner" from your code as it causes the clearfix issue. Mostly it is reason.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Columns in Boostrap grid immediately follows row. e.g row>col to avoid any kind of clearfix issue. Hope it helps.
JS Fiddle : https://jsfiddle.net/dncwdvkq/