0

私はウェブページを持っていて、画像を表示しようとしています。画像は比較的高品質なので、画像を 4 つの JPEG ファイルに分割し、それらを上下に表示しています。これでロード時間が短縮されました。すべてのブラウザーの PC ですべてが完璧に機能します。Mac に移行すると、次の問題が発生します。

画像

画像をよく見ると、上から下までちょうど 75% で、3 番目の画像が終了して 4 番目の画像が表示されると、画像間にわずかな隙間があります。これは Windows (Firefox、IE、Chrome) では発生せず、ほとんどの場合 OS X (Firefox、Safari、Chrome) で発生します。サイズを変更すると、他の画像境界 (つまり、3 番目と 4 番目ではなく 1 番目と 2 番目のストリップの間) に表示されたり消えたりすることがあります。正確な理由はわかりません (おそらく、すべてが 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

あなたがしていることは、私には本当に悪い考えのように思えます。このような問題を引き起こすだけでなく、サーバーへの呼び出しも増えます。より良いオプションがあります。私の好みは、画像の幅と高さを大きくして（たとえば、幅と高さの2倍にして画面に表示したい）、画像をかなり低い品質で保存することです。Retina ディスプレイでも画面上で非常に鮮明に表示され、通常は非常に小さなファイル サイズです。これに関する素晴らしい記事があります: http://blog.netvlies.nl/design-interactie/retina-revolution/ (これは、レスポンシブ画像/網膜画像の難問に対する私のお気に入りの解決策です。)

于 2013-08-03T10:02:33.540 に答える