高さの異なる画像を表示する方法

Question

私は行があり、その行には3つの記事があり、すべての記事に1つの写真が入っています 問題は行が表示されるときに発生します、 問題写真は同じ高さのサイズにすることはできませんこれは私のウェブサイトを悪く見せている。画像リンク------- https://i.stack.imgur.com/N5EVB.png

ノートすべての写真の高さは、ブートストラップ

を使用して、他の1

異なっている私のコード

'<div class='row'> 
     // product 1 
    <div class="col-sm-4 col-lg-4 col-md-4"> 
    <div class="thumbnail"> 
    <img src="/*Path here*/"> 
    <div class="caption max"> 
     <h2>/*subject*/</h2> 
     <h4>Selling by /*name*/</h2> 
     <p>/*main-information*/</p> 
    </div> 
    </div> 
    </div> 
      // product 2 
    <div class="col-sm-4 col-lg-4 col-md-4"> 
    <div class="thumbnail"> 
    <img src="/*Path here*/"> 
    <div class="caption max"> 
     <h2>/*subject*/</h2> 
     <h4>Selling by /*name*/</h2> 
     <p>/*main-information*/</p> 
    </div> 
    </div> 
    </div> 
     // Product 3 
    <div class="col-sm-4 col-lg-4 col-md-4"> 
    <div class="thumbnail"> 
    <img src="/*Path here*/"> 
    <div class="caption max"> 
     <h2>/*subject*/</h2> 
     <h4>Selling by /*name*/</h2> 
     <p>/*main-information*/</p> 
    </div> 
    </div> 
    </div> 
</div> // closing row ' 

ありがとうございます。

Answer 1

<style type="text/css"> 
    /* thubnail div */ 
    .thumbnail {overflow: hidden; box-sizing: border-box;} 
    /* all images in thumbnail div*/ 
    .thumbnail img{min-width: 200px; min-height: 123px; width: 200px; height: 123px; max-width: 200px; max-height: 123px; } 
</style> 

Answer 2

あなたがイメージに同じサイズを設定することができます。あなたはこれをしたくない場合は、記事のために同じ高さを設定することができ

.sameSize{ 
    width: 100px; 
    height: 100px; 
} 

。

Answer 3

容器全体に最小高さ設定