I have some code to output images in Wordpress like this...
<div class="col-md-2">
<?php $image = get_field('artist_photo');
if( !empty($image) ):
// thumbnail
$size = 'medium';
$thumb = $image['sizes'][ $size ];
?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" class="img-responsive" />
</div>
<?php endif; ?>
The problem is, all of the images have different heights (based on their proportions at original upload}.
Is it possible to make them have a uniform height whilst remaining responsive?
Here are two ways to constrain the height of an image in CSS.
First, you can set a maximum height. So something like:
.col-md-2 img {
display: block;
max-height: 300px;
width: auto;
height: auto;
}
Second, you can display the image as a background image and then use the background-size
property to constrain it. In your markup display the image using:
<div class="image" style="background: url(<?php echo $thumb; ?>) no-repeat center;" />
And style it like so:
.col-md-2 {
height: 300px;
}
.col-md-2 div.image {
height: 100%;
width: 25%; // for example, assuming you want 4 images per row
background-size: constrain;
}
I'm not sure how this will work in the context of bootstrap, but option 2 might be your only option if you can't specify an explicit height for the image or its parent.
There are more devils in the details and the specifics will depend on your situation, but hopefully this is helpful.