How can I equalize the heights of divs in table based on the tallest div using jQuery?

Question

I am creating a page that has a table with a bunch of images in it. Each image is wrapped in a set of divs. The images are user-added, so I have no control over the aspect ratio, but I will be enforcing a maximum width and height on uploaded images.

<table class="pl_upload"> 
  <tr class="row1"> 
    <td class="col1"> 
      <div>
        <div class="img-container">
          <a href="#"><img src="img.jpg" width="182"  alt="X" /></a>
        </div>
      </div> 
    </td>
    .......

What I would like to do is calculate the height of the tallest image div in the table, and then make the all of the image divs that same height using jQuery.

I made a jsfiddle page for it here:

http://jsfiddle.net/Evolution/27EJB/

score 2 · Accepted Answer · answered Mar 01 '11 at 23:23

2

var max = 0;

$(".pl_upload img").each(function() {
 if($(this).height() > max) {
  max = $(this).height();
 }
});

$(".img-container").height(max);

answered Mar 01 '11 at 23:23

stef

14,172
2
48
70

You need to wait for the images to load or it will not prevail! – RobertPitt Mar 01 '11 at 23:32
Thanks Stef! Beautiful example. I border those divs and everything now lines up perfectly. – Jamie Mar 02 '11 at 01:35
Great - glad it worked. Robert's example below might actually be better in practice because this event fires before images are loaded. – stef Mar 02 '11 at 07:28

score 1 · Answer 2 · edited May 23 '17 at 10:24

1

Not sure exactly what you are looking for, however this should be able to get the tallest image on the page and then set the div's on the page to that height.

Also, per this answer if you wrap the function in $(window).load() it should only be called once all images are loaded.

$(window).load(function() {
    var tallest = 0;
    $("img").each(function() {
        var h = $(this).height();
        if (h > tallest) {
            tallest = h;
        }
    });
    $("div").css("height", tallest);
});

Example on jsfiddle.

If this is not what you need please elaborate your question a bit.

edited May 23 '17 at 10:24

Community

1
1

answered Mar 01 '11 at 23:26

Mark Coleman

40,542
9
81
101

Brilliant Mark. This is exactly what I needed. Thanks for your time. Love jsfiddle! – Jamie Mar 02 '11 at 01:32
No problem glad I could help, I love me some jsfiddle as well! – Mark Coleman Mar 02 '11 at 01:34

score 0 · Answer 3 · answered Mar 01 '11 at 23:22

Would something like this be what your looking for:

var Max = 0;
var Images = $(".img-container img");

Images.each(function(k,v){
    $(this).load(function(){
        if(Max < $(this).height())
        {
            Max = $(this).height();
        }

        if(k == Images.length)
        {
            $(".img.container").height(max);
        }
    });
})

Test Case: http://jsfiddle.net/27EJB/1/

Im not saying it works exactly how you want it but from your description this is what i come up with.

How can I equalize the heights of divs in table based on the tallest div using jQuery?

3 Answers3