Mobile Safari 中不成比例的缩放/奇怪的图像截断

Question

我们在一个简单的网页上显示六张图片。

它们都以相同的尺寸显示，320 像素 x 180 像素。图像都大于这些尺寸，并被浏览器缩小。

但是，除了第四张和第五张图片之外，所有图片在 Mobile Safari 中的缩放比例都不成比例，即使这些图片在桌面上看起来不错（具有适当的比例）。

如果我们只显示三张图片，它们都会被正确渲染。

这是否与 iPhone 的处理能力有限有关？

按比例渲染图像的选项有哪些？

我们正在使用 jQuery。

网页：http://www.panabee.com/potsticker

Answer 1

您的图片设置为 100% 和 180 像素，因此除非浏览器的宽度正好为 320 像素，否则您的图片会失真。

您可以将.stream 类设置为 320 像素宽。

我建议使用图像标签。

将图像宽度设置为 100%，高度未定义。如果您需要裁剪图像，请将它们放在一个元素中并设置高度和溢出。

<div style="height:180px; overflow-y:hidden"><img ....

虽然最好提前准备好图像以保持相同的比例。

如果你需要让图片更窄一些，那么你可以设置元素的父元素的宽度。

此外，您可能希望在移动设备上使用分辨率较低的图片...这些图片很大。