對象高度與不同大小的圖像

Question

我有從不同的網站進來的圖像/縮略圖，我把它們放在a col-md-2類div。 問題是，圖像縮略圖的大小，寬度和/或高度不同，並且因爲它們的大小不同，所以它們不會水平對齊。 我應該如何接近它，使它們水平對齊，並且每個圖像塊具有相同的高度？

<div class="gallery-patagonia-content"> 
    <div class="container"> 
     <div class="row"> 
      <?php foreach ($images as $image) { ?> 
      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> 
       <a data-toggle="tooltip" data-placement="top" title="<?= $image>title; ?>" href="<?= $image>image; ?>"><img class="img-responsive" alt="<?= $image>title; ?>" src="<?= $image>thumbS; ?>"/></a> 
       <p><?= $image>copyright; ?></p> 
      </div> 
      <?php } ?> 
     </div> 
    </div> 
</div> 

Answer 1

你可以風格的圖像作爲背景，您可以設置寬度和高度，只要你想

.image { 
 
    display: block; 
 
    height: 100px; 
 
    width: 500px; 
 
    background: url(https://pixabay.com/static/uploads/photo/2016/01/12/19/16/painting-1136443_960_720.jpg) no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
    margin: 10px; 
 
    } 
 
.v2 { 
 
    height: 200px; 
 
    width: 200px; 
 
    } 
 
.v3 { 
 
    height: 300px; 
 
    width: 150px; 
 
    }

<div class="image"></div> 
 
<div class="image v2"></div> 
 
<div class="image v3"></div>