ブートストラップカラムの中で応答する画像の高さ

Question

これはなぜこのような闘争であるのかわかりません。私はコンテナの中にイメージを配置したい。その画像は応答性があります。つまり、列の幅が小さくなると、画像も小さくなるはずです。それは今ではありますが、高さを維持しているので、伸びて見えます。

https://codepen.io/anon/pen/vmZKyM

<div class="container-fluid"> 
    <div class="col-md-8 offset-md-2"> 
    <div class="row"> 
     <div class="col-md-4 offset-md-2"> 
     <div class="row"> 
      <p>Left column</p> 
      <img src="http://placehold.it/600x400" /> 
     </div> 
     </div> 
     <div class="col-md-5 offset-md-1"> 
     <div class="row"> 
      <p>Right column</p> 
      <img src="http://placehold.it/700x400" /> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Iは画像のアスペクト比（この場合、私は）わからないので、私は（通常の画像に使用される）padding-bottomトリックでこれを達成することができません。

どうすればこの問題を解決できますか？

Answer 1

width: 100%;に変更max-width: 100%;もなぜ `img`に` MAX-height`を使用していないheight: 100%;

Answer 2

コンテナは、固定の高さを持って、それにID（またはクラス）を与えると.imgの応答性の制約に例えば

.container { 
height: 600px; 
} 


/*And then change */ 
.container .img-responsive { 
display: block; 
height: auto; 
max-width: 100%; 
} 

/*To */ 
.container .img-responsive { 
display: block; 
width: auto; 
max-height: 100%; 
} 

ない、それは動作しますかどうかはわかり周りに他の方法を変更する必要がある場合それらが浮いている場合は姿勢のミックスは、それは本当に問題で