尽管使用Bootstrap上传尺寸，但强制Wordpress图像具有相同的高度

Question

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?

Answer 1

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.