Firefox 以不同方式调整图像大小导致图像之间的间隙/额外像素？答案

【问题标题】：Firefox resize image differently causing gap/extra pixels between images?Firefox 以不同方式调整图像大小导致图像之间的间隙/额外像素？
【发布时间】：2013-07-24 00:54:19
【问题描述】：

我有一排向左浮动的图像，我将图像的大小调整为 height:160px 并添加了所有图像的宽度。然后给父div一个宽度。（在我的项目中，我使用的是 iScroll，所以这就是我这样做的原因）。

img {
    height: 160px;
    vertical-align: top;
    float: left;
    display:block;
}

javascript：

var scrollerWidth = 0;
$('.scroller').find('img').each(function(){
    scrollerWidth += this.width;
});

$('.scroller').css('width', scrollerWidth);

在 Chrome 和 Safari 中一切正常，但在 Firefox 中不行。在 FF 中，最后一个图像将进入第二行。然而，总宽度与 Chrome 中的相同。而且您可以看到图像之间的间隙非常小。（它并不总是可见，如果您调整浏览器的大小有时可以看到）

你可以在这里查看我的 jsfiddle http://jsfiddle.net/shibbydoo/sQGk3/10/

我认为这可能是由于 Firefox 如何调整图像大小的原因是，如果您将 height 更改为 200px，那么一切都很好。有谁知道它为什么这样做？谢谢。

ps。在 Chrome 和 FF 中追踪到的所有图像宽度都相同，但显然不一样...

【问题讨论】：

我认为 compid 关于四舍五入是正确的。有趣的注释（在调试时记住这一点）：如果您删除设置滚动条宽度的行，这个问题就会消失。这意味着您的 JS 以一种使其从第一行剪切图像的方式限制滚动条
是的，我知道这一点，不幸的是我需要为 iScroll 设置它才能在我的项目中工作（不在 jsFiddle 中使用）
然后将图像缩放到您想要的大小，或者指定宽度属性。不过，这似乎是一个巨大的痛苦，因为我猜你最终会使用超过四张图片。你能把每张图片放在自己的 div 中，并给所有的 div 统一尺寸吗？然后额外的水平空间将是纯黑色或其他东西。如果/当您添加到项目中时，它看起来会保持一致，并且会让您更轻松。
这（统一的图像容器）也将使响应式设计更容易一些！
但是当我改变容器的高度百分比时，ff 不会仍然以不同的方式四舍五入吗？而且我的图片大小不一...

标签： javascript css image firefox cross-browser

【解决方案1】：

原因

我认为这是由于舍入误差造成的。当您将图像的高度设置为 160 像素且未设置宽度时，您是在告诉浏览器根据原始纵横比设置宽度。这意味着宽度可能不完全是整数，但仍会被浏览器四舍五入到最接近的整数。我怀疑 FF 的舍入方式略有不同，这会导致总数增加一个像素。

最神秘的部分是两个检查员报告所有图像的宽度相同。然而，在 Photoshop 中仔细查看截图后，似乎 Chrome 将图像总宽度渲染为 682px，而 Firefox 将图像总宽度渲染为 683px（比 javascript 计算的 682px 大）。

这张图片： https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTYhlmIx0ZgQCMA9xmnttw4vvrZIrlZpC9QNBhN9FoBUc46DFse 在 FF 中呈现 1px 宽。

修复

解决此问题的最佳方法可能是使用 100% 大小的图像，而不是让浏览器调整其大小。这样可以将加载时间降至最低，并确保您不会遇到图像尺寸四舍五入的问题。

【讨论】：

是的，这与我怀疑的相同，但我需要更改图像大小以使我的网站响应......还有其他可能的解决方法吗？在 javascript 中调整图像大小？
你想要达到的最终结果是什么？
将图像全部放在一行中。我昨晚找到了解决办法，谢谢你的帮助。
出于好奇，解决了什么问题？

【解决方案2】：

多亏了 compid 和 trojansdestroy，我才能集思广益。由于在 FF 和 Chrome（最奇怪的部分）中绘制出的每个图像宽度都是相同的（最奇怪的部分），我只是将图像的宽度设置为绘制出的宽度，然后修复它。

$('.scroller').find('img').each(function(){
    scrollerWidth += this.width;
    $(this).css('width', this.width);
});

这是jsFiddle

【讨论】：