異なるサイズの画像を持つオブジェクトの高さ

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

あなたが百に近い各画像のCSSプロパティを追加

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