シンプルな Web ページに 6 つの画像を表示します。
それらはすべて同じサイズ (320px x 180px) で表示されます。画像はすべてこれらの寸法よりも大きく、ブラウザによって縮小されます。
ただし、4 番目と 5 番目の画像を除くすべての画像は、デスクトップ上では (適切な比率で) きれいに見えますが、Mobile Safari では不均衡にスケーリングされます。
3 つの画像のみを表示すると、すべて適切にレンダリングされます。
これは、iPhone の処理能力が限られていることと関係がありますか?
画像を比例してレンダリングするためのオプションは何ですか?
jQueryを使用しています。
ウェブページ： http: //www.panabee.com/potsticker
画像は100％と180ピクセルに設定されているため、ブラウザの幅が正確に320ピクセルでない限り、画像は歪んでしまいます。
.streamクラスの幅を320pxに設定できます。
画像タグの使用をお勧めします。
画像の幅を100％に設定し、高さは未定義のままにします。画像をトリミングする必要がある場合は、画像を要素に入れて、高さとオーバーフローを設定します。
<div style="height:180px; overflow-y:hidden"><img ....
同じ比率になるように事前に画像を準備するのが最善かもしれませんが。
画像をもう少し狭くする必要がある場合は、要素の親の幅を設定できます。
また、モバイルには低解像度の画像を使用することをお勧めします...これらの画像は巨大です。