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:

<a href="path/to/full_size.jpg" class="image" style="background-image: url(path/to/image.jpg);">Link Text Here</a>

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.

Answer 2

There are 3 overall approaches to grid alignment / height issues in Bootstrap

A CSS only approach like this this..

http://bootply.com/85737

A 'clearfix' approach like this this (requires iteration every x columns)..

http://bootply.com/89910

Finally, you could use the Isotope or Masonry plugin. Here is a working example that uses Isotope + Bootstrap 3:

http://bootply.com/109446

More on the Bootstrap height issue

Answer 3

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.