Question

我有一行，这行有3篇文章，每篇文章里面都有一张照片，但问题是当我去显示行时出现一些问题，问题是照片的高度不能相同，这使我的网站看起来很糟糕。图片链接------- Google Drive Android API Demos app

请注意每张照片的高度与另一张照片的高度不同

使用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

您可以为图片设置相同的尺寸：

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

如果您不想这样，可以为文章设置相同的高度。

Answer 2

将min-height设置为整个容器

Answer 3

<body>
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
</body>

如何显示不同高度的图像

3 个答案: