我们在一个简单的网页上显示六张图片。
它们都以相同的尺寸显示，320px×180px。图像都大于这些尺寸，并由浏览器缩小。
然而，除了第四张和第五张图片之外，所有图像都在Mobile Safari中不成比例地缩放，即使图像在桌面上看起来很好（比例适当）。
如果我们只显示三张图片，那么它们都会正确呈现。
这是否与iPhone上有限的处理能力有关？
按比例渲染图像的选项有哪些？
我们正在使用jQuery。
答案 0 :(得分：0)
您的图像设置为100％和180像素，因此除非浏览器的宽度正好是320像素，否则您的图像会变形。
您可以将.stream类设置为320px宽。
我建议使用图片标记。
将图像宽度设置为100％，并保持高度未定义。如果需要裁剪图像，请将它们放入元素中并设置高度和溢出。
<div style="height:180px; overflow-y:hidden"><img ....
尽管最好提前准备好图像以获得相同的比例。
如果您需要图像更窄一些，那么您可以设置元素父级的宽度。
此外，您可能希望将低分辨率图像用于移动设备......这些图像非常庞大。