Using Twitter bootstrap, how do I make the thumbnail (as in the thumbnail component) have the same height?

Question

You can see here http://twitter.github.com/bootstrap/components.html#thumbnails in the example with the title and description, if the title or description of one cell is much shorter or longer than the other, the entire block height will be reduced or increased accordingly.

How do these blocks have the same height?

I tried setting display: table-row in ul and display: table-cell in the .thumbnail class, but unfortunately it completely interfered with the responsiveness of the layout: the height and width of the image inside the block no longer changes automatically,

UPDATE: set up a problem demonstration on jsfiddle http://jsfiddle.net/kwBuW/7/

Answer 1

Perhaps you can fix the height of a div that has a thumbnail class. How:

 <div class="thumbnail" style="height: 400px;"> 

If you need the same height for each content, I think you should write JavaScript that will fix it after the DOM is ready, of course. How:

 var max = 0, jThumbnails = $("ul.gallery div.thumbnail"); jThumbnails .each(function(index, elt){ max = Math.max(max, $(elt).height()); }); jThumbnails.setHeight(max);