メイク像高フィット

Question

私は画像の高さは任意のサイズの画面内になりたいブートストラップコード

<header> 
My Header 
</header> 

<div class="container"> 

<div class="col-md-8"> 
<div class="col-image"> 
<img src="my-image.jpg" > 
<div> 
</div><!--col-md-8--> 

<div> 
comments 
</div> 


<div class="col-md-4"> 
my sidebar 
</div><!--col-md-4--> 

</div><!--container--> 

<footer> 
my footer 
</footer> 

内の画像を持っています。応答の高さ

私はheight:auto; max-height:100vh;を追加しようとしましたが、全く動作しませんでした。どんな助けも充当されます。

Answer 1

画像の親は定義された高さでなければなりません。したがって、最大高さまたは高さを設定できます。パーセントでheitghについて 検索;）

PS：クラスIMG応答性を追加し、フルページで

.col-image{ 
 
    height: 100vh; 
 
    border: 1px solid red; 
 
} 
 
img{ 
 
    float:left; 
 
    max-height: 100%; 
 
    height: 100% 
 
}

<header> 
 
My Header 
 
</header> 
 

 
<div class="container"> 
 

 
<div class="col-md-8"> 
 
<div class="col-image"> 
 
<img src="http://papodeturista.com/wp-content/uploads/2016/02/arvore.jpg" > 
 
<div> 
 
</div><!--col-md-8--> 
 

 
<div> 
 
comments 
 
</div> 
 

 

 
<div class="col-md-4"> 
 
my sidebar 
 
</div><!--col-md-4--> 
 

 
</div><!--container--> 
 

 
<footer> 
 
my footer 
 
</footer>

Answer 2

を参照してください。ここ

<img src="my-image.jpg" class="img-responsive" /> 

詳細情報：ブートストラップのBootstrap Images