How to make a responsive grid of photos using Twitter Bootstrap if heights are different

Question

How can I Twitter Bootstrap 3\'s \'img-responsive\' images, but allow them to have a set height so that a grid of photos will flow (unlike the below image)?

I\'ve tried

Answer 1

No one has suggested cropping yet, so I'll throw my 2 cents in.

I would use a predefined width x height on the grid version of images that have a larger, irregular version. Actually, even if the larger version wasn't irregular I'd probably still do this. The underlying markup would still be a grid, be it Foundation, Bootstrap, whatever.

This way you can always link to the large / original size and use grid or thumbnail images where appropriate. For a static site I would do this by hand, for a dynamic site I'd use an image processor that gives me different styles automatically, e.g. example.com/image-styles/thumb/photo.jpg.

Obviously different images need to be cropped differently, but if you don't care about where the crop happens, you could just set the image inside of a div and overflow: hidden; the entire thing: http://jsfiddle.net/785gN/

The downside to that is you're assuming all images are square or landscape, not portrait (or vice versa). Alternatively, use a background-image with background-size: cover; as has been suggested.