Question

我正在创建一个页面，其中包含一组包含大量图像的表格。每个图像都包含在一组div中。图像是用户添加的，因此我无法控制宽高比，但我会对上传的图像强制执行最大宽度和高度。

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

我想要做的是计算表中最高图像div的高度，然后使用jQuery使所有图像div具有相同的高度。

我在这里为它制作了一个jsfiddle页面：

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

Answer 1

var max = 0;

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

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

Answer 2

不确定您要找的是什么，但是这应该能够获得页面上最高的图像，然后将页面上的div设置为该高度。

此外，根据answer，如果您将函数包装在$(window).load()中，则只应在加载所有图像后调用它。

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

jsfiddle上的示例。

如果这不是你需要的，请详细说明你的问题。

Answer 3

这样的事情会是你想要的：

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);
        }
    });
})

测试用例：http://jsfiddle.net/27EJB/1/

我并不是说它完全符合您的要求，但根据您的描述，这就是我想出的。

如何基于使用jQuery的最高div来均衡表中div的高度？

3 个答案: