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

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

可以在resize后写一个函数，查看#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');
}