Question

我正在尝试在DIV上创建一个包含5个图像的面板，其中jQuery animate()连续展开每个图像，直到所有5个图像消耗其容器宽度的100％而不包装

Here是问题的链接：

初始的blockUI显示正常，但是一旦它到期并显示正常页面，相同的五个图像将在某些分辨率下完美显示（我在FF或IE中使用ctrl - + / - 进行测试）和其他导致要包装的最后一个图像。

下面是调整大小调整动画的代码，其目的是将每个图像的大小调整为容器宽度的20％。我试图看看它是否与舍入有关并且是空的。我已经研究了CSS选项，尝试了以下部分/全部内容：

overflow:hidden;
white-space: nowrap;
display:inline-block;


$(".service_img").each(function (i) 
  {
    // if the image in question's width is > 20% of its container then re-adjust it to be 20% so it will fit
    if($('#'+this.id).outerWidth() > Math.floor((($('#services_imgs_container').outerWidth()/5)))){
      $('#'+this.id).width(Math.floor(($('#services_imgs_container').outerWidth()/5)));
    }
    else {
      $('#'+this.id).animate({width:(Math.floor(($('#services_imgs_container').outerWidth()/5)))},{duration:500, queue:false});
      //$('#'+this.id).animate({width:'19.2%'},{duration:500, queue:false});
      $('#'+this.id).show();
    }

  })

Answer 1

您可以在调整大小后编写一个函数，并检查#services_imgs_container是否是div.service_img：eq（0）高度的两倍。如果它将每个.service_img的大小一次减少一个像素，直到该语句不再为真。

类似这样的事情

while($('#services_imgs_container').height() >= ($('.service_img:eq(0)').height() * 1.5))
{
    $('.service_img').css('width': '-=1');
}

CSS图像换行问题 - 取决于浏览器缩放级别

1 个答案: