サイズ変更時のブートストラップイメージの高さ

Question

私はhtml/css/bootstrapの新機能です。私はimg-responsiveのクラスで画像に問題があります。私は、ウィンドウのサイズを変更したときに、col-md-4の完全な高さを維持できない理由を理解できません。画像のサイズは640x426です。それは高さが小さくなるのを続け、中心にないように見える。ここ はコード

<div class="container-fluid">   <!-- BEGINNING OF FEATURES --> 
<div class="row"> 
    <div class="col-md-4"> 

     <div class="features-wrapper right"> 
      <div class="features-icon"> 
       <i class="fa fa-desktop" aria-hidden="true"></i> 
      </div> <!-- ICON --> 
     <div class="features-text"> 
      <h4 class="md-size">Simple design</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum asperiores accusamus ipsa alias quibusdam facilis omnis.</p>  
     </div>  <!-- features-text --> 
     </div>  <!-- Wrapper-right --> 

     <div class="features-wrapper right"> 
     <div class="features-icon"> 
      <i class="fa fa-desktop" aria-hidden="true"></i> 
      </div> 
     <div class="features-text"> 
     <h4 class="md-size">Simple design</h4> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum asperiores accusamus ipsa alias quibusdam facilis omnis.</p>  
     </div> 
     </div> 

    </div>  <!-- END OF COL-MD-4 --> 



    <div class="col-md-4"> 
     <div class="features-wrapper image"> 
      <img class="img-responsive" src="images/tablet-2.jpg" alt=""> 
     </div> 
    </div> 

    <div class="col-md-4"> 

     <div class="features-wrapper left"> 
      <div class="features-icon"> 
       <i class="fa fa-bar-chart" aria-hidden="true"></i> 
      </div> 
     <div class="features-text"> 
      <h4 class="md-size">Designed for your needs</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum asperiores accusamus ipsa alias quibusdam facilis omnis.</p>     
     </div> 
    </div> 

    <div class="features-wrapper left"> 
      <div class="features-icon"> 
       <i class="fa fa-bar-chart" aria-hidden="true"></i> 
      </div> 
     <div class="features-text"> 
      <h4 class="md-size">Designed for your needs</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum asperiores accusamus ipsa alias quibusdam facilis omnis.</p>     
     </div> 
    </div> 
    </div>     <!-- END OF COL-MD-4 -->  
</div>      <!-- END OF ROW --> 

そして、ここでは、これはそれを解決することができCSS

div.features-wrapper.right .features-text{ 
    text-align: right; 
    padding-right: 60px; 
    margin-bottom: 50px; 
} 

div.features-wrapper.left .features-text{ 
    padding-left: 60px; 
    margin-bottom: 50px; 
} 


h4.md-size{ 
    font-size: 1.5em; 
    font-weight: 400; 

} 

.features-icon{ 
    width: 50px; 
    height: 50px; 
    margin-left: 10px; 
    margin-right: 0px; 
} 
.features-wrapper.right .features-icon{ 
    float: right; 

} 

.features-wrapper.left .features-icon{ 
    float: left; 
} 

.features-icon i{ 
    font-size: 25px; 
    color: #286090; 
} 

Answer 1

期待どおりに動作しています。応答性は高さではなく幅に基づいています。 img-responsiveは、容器の画像の幅を100％にします（col-md-4）。縮小されたブラウザでは、画像の幅も縮小されます。画像の高さは比例して調整されます（画像のHxWに基づいて）。

あなたが100％の高さに画像を強制することができたが、その後it will appear distorted：

.image > .img-responsive { 
    height: 100%; 
} 

は、基本的には、ビューポート（ブラウザ）の比率は、画像の比率と同じではありません。このシナリオでは、 background-size:coverはブラウザのサイズに応じて高さと幅の両方を使用するため、背景画像がうまく機能する可能性があります。

.bg-image { 
    background-image:url(//placehold.it/640x426); 
    background-size: cover; 
    background-position: center center; 
    min-height: 300px; 
} 

http://www.codeply.com/go/5L6McSklPb

Answer 2

これです。 .img { width :100%}