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

I'm not familiar with bootstrap, but I'm sure you could wrap each img in a div.wrapper, and apply something like this to the divs:

div.wrapper {
    width: 33%;
    height: 200px; /* or whatever... */
    overflow: hidden;
    float: left;
}

Then to handle image scaling:

.wrapper img {
    max-width: 100%;
    height: auto;
} 

EDIT - ALTERNATIVE METHOD

To achieve what you want I think the best way will be to use background images on an alternative element, with background-size: cover, instead of img tags.

HTML:

Link Text Here

Repeat for each of your images in the grid, instead of using img tags.

CSS:

.image {
    display: block;
    text-indent: -1000px; /* hide link text */
    overflow: hidden;
    background-size: cover;
    width: 33%;
    height: 200px;
    float: left;
}

Note that background size is not supported in IE versions 8 and below, if that matters to you.