Equals heights of thumbnails

Question

I have 3 thumbnail span3 elements per Twitter Bootstrap row but the the <p> text is variable which breaks the layout. How could I set each thumbnail to be the height of the largest thumbnail so that they flow correctly?

<div class="box_line" style="float: left; border: 1px solid red;">
  <div class="thumbnail span3">
    <img src="http://placehold.it/260x180" alt=""/>
    <div class="caption">
      <h5>Thumbnail label</h5>
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
  </div>
</div>

I haven't found a working jQuery plugin to do this and the solution in this topic doesn't work for me either.

I am sorry but I don't understand your english: What do you mean "everytime the text in the
element has else height", and what is "the highest thumbnail" ? — George Katsanos, Feb 14 '12 at 14:33
maybe it could be useful know why do you want all boxes with same height to try different approaches (css pure) — Fabrizio Calderan, Feb 14 '12 at 14:33
@GeorgeKatsanos sometimes the text in the **P** tag can has 10 chars, sometimes 300 chars => the text in the **p** will be in one row, or could be also on 5 rows. "The highest thumbnail" is the thumbnail with the greatest high (because of variable text in the **p**) — user984621, Feb 14 '12 at 14:40
@FabrizioCalderan because I try to get [this effect](http://www.cssnewbie.com/example/equal-heights/). (this example doesn't works me) — user984621, Feb 14 '12 at 14:43
@user984621 maybe you're trying to get columns height before the complete image load. can you provide a demo of what you've done? — Fabrizio Calderan, Feb 14 '12 at 14:47
Sure, here is it - but I am struggling with how to move three boxes in one row (here on jsfiddle) - [link here](http://jsfiddle.net/nwqtF/1/) — user984621, Feb 14 '12 at 15:02
And I would like to have the high of the three boxes set up by the greatest hight (in this case by the middle box) — user984621, Feb 14 '12 at 15:05

Fabrizio Calderan · Accepted Answer · 2016-01-04T09:08:33.107

21

try this fiddle : http://jsfiddle.net/PbfpU/2/ (I used the script you linked in the comments)

anyway be sure to call that function only after all thumbnails have been loaded, otherwise you could get wrong values.

function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumbnail")); 
});

edited Jan 04 '16 at 09:08

answered Feb 14 '12 at 15:13

Fabrizio Calderan

120,726
26
164
177

but the problem is, that this sample doesn't works in the Chrome - here is set up the height of the row by the first box (in FF it works.) – user984621 Feb 14 '12 at 15:17
hi Fabrizio, could you one more time please send me a fix for Chrome? – user984621 Feb 14 '12 at 17:10
It would be nice to see the code in this answer instead of having to follow a link. – Ian McLaird Aug 21 '13 at 19:21
Instead of `tallest = 0;` it should read `var tallest = 0;`. Otherwise this becomes a global property on the `window` object :-( – hgoebl Sep 16 '14 at 16:22

score 17 · Answer 2 · answered Dec 05 '12 at 04:21

I know I'm late to the party, but here's a handy variation on Fabrizio's answer, wrapped up as a jQuery plugin:

(function($) {
    $.fn.uniformHeight = function() {
        var maxHeight   = 0,
            max         = Math.max;

        return this.each(function() {
            maxHeight = max(maxHeight, $(this).height());
        }).height(maxHeight);
    }
})(jQuery);

...and to use it:

$(".thumbnails").find(".thumbnail").uniformHeight();

Also, if your thumbnails contain images, make sure to call this after the window load event has fired.

+1 for the mention about waiting for all images loaded – dogawaf Oct 15 '14 at 12:16 — dogawaf, Oct 15 '14 at 12:16

score 10 · Answer 3 · answered Nov 03 '12 at 18:12

CSS solution would be to use clear: left; for every thumbnail that should be first in the row. This works if you know number of thumbnails in a row beforehand.

I use following css class:

ul.thumbnails.per6 > li:nth-child(6n+1) {
  clear: left;
}

And HTML looks like this:

<ul class="thumbnails per6">
  <li class="span2">
    <div class="thumbnail">...</div>
  </li>
</ul>

Please see this for browser support.

score 7 · Answer 4 · edited May 23 '17 at 12:17

7

I liked Tim's answer, and here's my version in a one-liner:

$(".thumbnail").height(Math.max.apply(null, $(".thumbnail").map(function() { return $(this).height(); })));

With a nod to Roatin Marth for getting the maximum value of an array.

edited May 23 '17 at 12:17

Community

1
1

answered Feb 15 '14 at 13:38

Benjamin Curtis

1,570
12
13

This works perfectly, literally plugged it into my bootstrap setup that has an unknown amount of variable height thumbmails. Thanks! – Cody Reichert Aug 17 '14 at 21:34

score 2 · Answer 5 · edited May 23 '17 at 12:17

For responsive sites, you may want to update the height on window resize. I extended Tim Lowrimore's uniformHeight plugin with Gaby aka G. Petrioli's clever trick for getting the height of an elements content using wrapInner https://stackoverflow.com/a/6853368/1138558.

(function ($) {
    $.fn.uniformHeight = function () {
        var maxHeight = 0,
            wrapper,
            wrapperHeight;

        return this.each(function () {

            // Applying a wrapper to the contents of the current element to get reliable height
            wrapper = $(this).wrapInner('<div class="wrapper" />').children('.wrapper');
            wrapperHeight = wrapper.outerHeight();

            maxHeight = Math.max(maxHeight, wrapperHeight);

            // Remove the wrapper
            wrapper.children().unwrap();

        }).height(maxHeight);
    }
})(jQuery);

I then applied it to the thumbnails using:

$('.thumbnails').find('.thumbnail').uniformHeight();

$(window).resize(function () {
    $('.thumbnails').find('.thumbnail').uniformHeight();
});

score 1 · Answer 6 · edited Oct 19 '16 at 14:52

Using the css flexbox, it's possible to make equals heights of thumbnails with css

Here have best example

.equal-height-thumbnail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  margin: 0;
  padding: 0;
  list-style: none;
}

.equal-height-thumbnail li {
  width: 22%;
  margin: 0 1% 20px;
  padding:0 0.5%;
  background: #FFF;
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.1)
}
.equal-height-thumbnail figure {
  display: block;
  margin: 5px 0;
  padding: 0;
}
.equal-height-thumbnail figure img{ width:100%;}
.caption { padding: 2%;}

<ul class="equal-height-thumbnail">
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Aliquam erat volutpat. Curabitur, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattit felis. Aliquam erat volutpat. Curabitur </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. Aliquam erat volutpat. Curabitur </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, tempor nec eget felis. Aliquam erat volutpat. Curabitur </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. Aliquam erat volutpat. Curabitur </p>
      </div>
    </li>
    <li>
      <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
      <div class="caption">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nabitur </p>
      </div>
    </li>
 
  </ul>

score 0 · Answer 7 · answered Aug 25 '14 at 14:25

0

this code in css

/*in css*/
  .thumbnail img{
   height:100px;
                }

/or just add it inline/

  <img="imglinkwhateveryouwant" style="height:100px;">

that's it!!!

answered Aug 25 '14 at 14:25

Aniket Patil

1

score 0 · Answer 8 · answered Nov 30 '15 at 01:43

0

Just add below css will fix your issue.

.container{
    display: flex;
    flex-wrap: wrap;
  }

You can see the result here. http://www.bootply.com/RqapUKLqMF

answered Nov 30 '15 at 01:43

Capsen

34
2

It's not work. You have just use the same content for all – Przemysław Kaczmarczyk Mar 02 '17 at 13:09

score -2 · Answer 9 · answered Dec 18 '12 at 21:07

-2

Just set a maximum height.

.caption p {
   height: 120px;
}

http://jsfiddle.net/F5eCq/

answered Dec 18 '12 at 21:07

Andrew Luzkovky

251
3
10

2

This is non-responsive which defeats the main purpose of using Twitter Bootstrap's `thumbnails` because if the images (among other possible elements) happen to have different heights, the same issue will occur. It's a point of frustration for myself included but this isn't a flexible solution. – Alastair Feb 28 '13 at 13:45

Equals heights of thumbnails

9 Answers9

Linked