Object Height with different sized images

Question

I have image/thumbnails coming in from a different website and I am putting them in a col-md-2 class div . The problem is that the image thumbnails are of different sizes, in width and/or height and since they are of different size they do not align horizontally. How should I approach it so that they align horizontally and each image block is of same height?

<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

you can style the image as background so you can set width and height as you want

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