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 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?

photo gallery

See [how to replicate pinterest.com's absolute div stacking layout](http://stackoverflow.com/questions/7109362/how-to-replicate-pinterest-coms-absolute-div-stacking-layout) and [Masonry](http://masonry.desandro.com/) — Boaz, Feb 01 '14 at 22:24
@Boaz - That's interesting - will give it a shot. But that allows for varying-height images - is there not a way to do it to make it actually a grid? — Dave, Feb 01 '14 at 22:31
Typically this would be done by cropping all images to a defined ratio. — Charlie Schliesser, Feb 01 '14 at 22:42
@CharlieS - obviously I could crop the images - but I don't think that's the only approach, and I'd rather not if I don't have to. — Dave, Feb 01 '14 at 22:46
@Dave there are big advantages to that – I posted an answer and welcome any critiques or issues you have with that. — Charlie Schliesser, Feb 01 '14 at 22:48
@Dave I have the same problem. Have you found a working solution? thank you — Steve, Mar 03 '16 at 20:17

Josh Harrison · Accepted Answer · 2014-02-01T23:58:22.900

11

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.

edited Feb 01 '14 at 23:58

answered Feb 01 '14 at 22:37

Josh Harrison

5,927
1
30
44

This doesn't work. As the photos scale smaller, because of a smaller window, the horizontal images don't fill the entire height, so it still looks the same as the photo above. – Dave Feb 01 '14 at 22:41
`background-size: cover;` is a great tool. You have to wrap any `` tags around your `div`s or what have you, but that's allowed in HTML 5. – Charlie Schliesser Feb 01 '14 at 22:53
With the background-size approach above you will have images slightly zoomed in on larger screens, which doesn't always look bad. If it looks nasty, the simplest way to get around this is to include larger images, or do some javascript or media query detection to load in higher res source files. – Josh Harrison Feb 01 '14 at 22:54
@Charlie S - or just use the `a` tags with background on themselves and display block – Josh Harrison Feb 01 '14 at 22:55
@Zougen - how do the three pieces of code work together? All 3, or just the latest "Edit"? (hard to tell what you're going for without HTML to reference) – Dave Feb 01 '14 at 23:46
I've edited to make it clearer. The edit was an alternative method - I've included some html now too. – Josh Harrison Feb 01 '14 at 23:59

Carol Skelly · Answer 2 · 2017-03-13T04:21:25.707

5

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

edited Mar 13 '17 at 04:21

answered Feb 01 '14 at 22:41

Carol Skelly

351,302
90
710
624

I would have loved to use a CSS approach, but neither the first or second example show a grid - the images all have varying heights with whitespace below...etc. – Dave Feb 01 '14 at 22:45
@Dave -- the clearfix solution is only meant to clear the floats, not create a masonry-like layout. – Carol Skelly Mar 13 '17 at 04:23

Charlie Schliesser · Answer 3 · 2014-02-01T22:56:41.360

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.

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

3 Answers3

Linked