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