0

我有一个网页，我正在尝试显示图像。因为图像质量相对较高，所以我将图像拆分为四个 JPEG 文件，并将它们一个接一个地显示。我得到了更好的加载时间。在所有浏览器上的 PC 上一切正常。当我移动到 Mac 时，我遇到了这个问题：

图片

仔细看图片，从上到下正好是75%，当第三张图片显示完，第四张显示出来的时候，图片之间有很细的空隙。这不会发生在 Windows（Firefox、IE、Chrome）上，而主要发生在 OS X（Firefox、Safari、Chrome）上。当我调整它的大小时，它可能会消失或出现在其他图像边界（即第一条和第二条之间而不是第三条和第四条之间）。我不知道确切的原因（它可能与 PC 上的整数和 Mac 上的浮点数有关），我需要解决它。CSS 没有什么特别之处，图像只是显示为宽度为 100% 的块以适应容器。我尝试过使用填充和边距，但我无法让它工作。我可以通过设置类似的东西来摆脱它margin:-0.2px但这显然是一个非常肮脏的解决方案，即使非常轻微，也会扭曲图像。

这是代码，如果有帮助：

<div class="photoborder" id="PhotoContainer" style="width: 536px; height: 354px; left: 376.5px;">
    <div style="" id="ContentDiv" onclick="unloadPhoto();">
        <img id="PhotoSlice0" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_0.jpg" class="partialimage">
        <img id="PhotoSlice1" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_1.jpg" class="partialimage">
        <img id="PhotoSlice2" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_2.jpg" class="partialimage">
        <img id="PhotoSlice3" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_3.jpg" class="partialimage"></div>
    <div style="opacity: 0;" id="PhotoInfoBgDiv" onmouseover="setOver(true);" onmouseout="setOver(false);">
    </div>
</div>

PhotoContainer 具有绝对定位。ContentDiv 隐藏了overflow-x，仅此而已。

4

2 回答 2

1

你正在做的事情对我来说似乎是一个非常糟糕的主意。除了造成这样的麻烦之外，它还涉及对服务器的更多调用。有更好的选择。我的偏好是给图像一个大的宽度和高度（比如我希望它出现在屏幕上的宽度和高度的两倍），然后以相当低的质量保存图像。它在屏幕上看起来非常清晰，即使在视网膜显示器上也是如此，而且通常是一个非常小的文件大小。这里有一篇很好的文章：http: //blog.netvlies.nl/design-interactie/retina-revolution/（这是我最喜欢的响应式图像/视网膜图像难题的解决方案。）

于 2013-08-03T10:02:33.540 回答
0

加载问题的解决方案可能是使用渐进式图像。

它会立即加载，并增加清晰度。它还将减小文件大小。

于 2013-08-03T10:06:40.003 回答