移動Safari中圖像的不成比例縮放/奇怪截斷

Question

我們在簡單的網頁上顯示六幅圖像。

它們都以相同的尺寸顯示，320x180像素。圖像的尺寸都大於這些尺寸，並被瀏覽器縮小。

但是，除了第四張和第五張圖像之外的所有圖像都在移動Safari中不成比例地縮放，即使圖像在桌面上看起來不錯（具有適當的比例）。

如果我們只顯示三個圖像，它們都會正確渲染。

這是否與iPhone上的處理能力有限有關？

按比例渲染圖像有哪些選擇？

我們正在使用jQuery。

網頁：http://www.panabee.com/potsticker

Answer 1

您的圖片設置爲100％和180像素，所以除非瀏覽器是完全320像素寬的圖像會得到扭曲。

您可以將.stream類設置爲320px寬。

我推薦使用圖片標籤。

將圖像寬度設置爲100％，並保持高度未定義。如果您需要剪切圖像，請將它們放入一個元素中並設置高度和溢出。

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

儘管提前準備好圖像可能會有相同的比例，但最好做到這一點。

如果你需要圖像更窄一點，那麼你可以設置元素的父寬度。

此外，你可能會想要使用較低分辨率的圖像的移動...這些圖像是巨大的。