javascript - 如何显示不同高度尺寸的图像

Question

我有一行，一行有3篇文章，每篇文章里面有一张照片， 但问题是当我去显示行时出现了一些问题， 问题是照片不能具有相同的高度尺寸，这让我的网站看起来很糟糕。图片链接------ /image/N5EVB.png

注意每张照片的高度都不同

使用 Bootstrap

我的代码

'<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>