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