对象高度与不同大小的图像

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>