How to make a responsive grid of photos using Twit

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 setting the image height attribute, and max-height attribute, but it seems to ignore those unless I set it's height with '!important', but then they look bad and not really in a grid because they take up so little horizontal space.

I've tried a few tricks related to putting them as background images of divs, and overflow:hidden, but everything I've tried 1) doesn't work, and 2) seems hacky 3) looks messed up. (tried going through this one, as an example)

The images are slightly bigger than the area they fill, as I want them to be able to show bigger on large monitors, so even if I did get the background image thing to work, it would be showing a zoomed-in version of the image, since the background doesn't know to scale-down to fit.

This seems like it HAS to be a common occurrence - is there a somewhat simple way to handle it?

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

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.

Answer 3

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