非常に大きな画像は Google Chrome ではレンダリングされません (ただし、スクロールバーは画像が存在するかのように動作します)。多くの場合、同じ画像が他のブラウザーで問題なく表示されます。
2 つのサンプル画像を次に示します。Google Chrome を使用している場合、長い赤いバーは表示されません。
ショートブルー
http://i.stack.imgur.com/ApGfg.png
ロングレッド
http://i.stack.imgur.com/J2eRf.png
ご覧のように、ブラウザは長い画像があると認識しますが、単にレンダリングしません。画像形式も問題ではないようです。PNG と JPEG の両方を試しました。また、異なるオペレーティング システム (Windows と OSX) を実行している 2 つの異なるマシンでこれをテストしました。これは明らかにバグですが、Chrome で大きな画像を強制的にレンダリングする回避策を考えられる人はいますか?
誰もこの投稿を気にかけたり、見たりしているわけではありませんが、私は奇妙な回避策を見つけました。問題は、Chrome がズームを処理する方法にあるようです。プロパティを 98.6% 以下または 102.6% 以上に設定zoomすると、画像がレンダリングされます (プロパティを 98.6% から 102.6%の間のzoom任意の値に設定すると、レンダリングが失敗します)。このプロパティは CSS で正式に定義されていないため、一部のブラウザーでは無視される場合があることに注意してください (これはブラウザー固有のハックであるため、この場合は良いことです)。画像のサイズが多少変更されることを気にしない限り、これが最善の修正であると思います。zoom
つまり、次のコードは、ここに示すように、目的の結果を生成します。
<img style="zoom:98.6%" src="http://i.stack.imgur.com/J2eRf.png">
実はこれが一石二鳥の好機。画面がより高い解像度 (Apple Retina ディスプレイなど) に移行するにつれて、Web 開発者は、ここで提案されているように、2 倍の大きさの画像の提供を開始してから、50% 縮小することを望むでしょう。zoomしたがって、上記のようにプロパティを使用する代わりに、単純に画像のサイズを 2 倍にして、半分のサイズでレンダリングすることができます。
<img style="width:50%;height:50%;" src="http://i.stack.imgur.com/J2eRf.png">
これにより、Chrome でのレンダリングの問題が解決されるだけでなく、次世代の高解像度ディスプレイで画像がきれいに鮮明に表示されます。