ブートストラップimg-responsive親にスケーリングされていません

Question

ブートストラップimg-responsiveクラスを使用して、親コンテナ内で画像のサイズを変更しようとしましたが、うまくいきません。このシナリオでは、画面上のグリッドパターンで2〜4枚の画像を表示し、親div内で画像が応答するようにしたいと考えています。

問題は、画像がimg-containerクラスで縮小しないことです。

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; 
} 

注：foll画像が反応するようになるので、img-containerを行の高さにすることでグリッドから離れてしまいます。 img-responsiveクラスが無視されるように引き起こしている何）

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（私はimg-container高さが100％になりたくありませんか）？
B）画像を反応させるためには何ができますか？img-container divは100％の高さにはなりません。

EDIT：主な特徴は、スクロールせずにコンテンツをブラウザウィンドウにリサイズすることです。つまり、2行ごとにheight: 50vh;となります。

EDIT2：（画像なしスケーリング最大解像度である場合にのみ動作大イメージ以下のブラウザウィンドウは、上記の問題を生じさせる）ここが所望の結果である

Answer 1

私が削除しましたあなたのラッパー "row-inner"はあなたのコードからclearfixの問題を引き起こします。主にそれが理由です。

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> 

列は直ちに行に続きます。いかなる種類の明瞭な修正の問題も避けるために、例えばrow>colである。それが役に立てば幸い。

JSフィドル：https://jsfiddle.net/dncwdvkq/