Question

We display six images on a simple web page.

They are all shown with the same dimensions, 320px by 180px. The images are all larger than these dimensions and get scaled down by the browser.

However, all but the fourth and fifth images are scaled disproportionately in Mobile Safari even though the images look fine (with proper proportions) on the desktop.

If we show only three images, they all get rendered properly.

Does this have something to do with the limited processing power on the iPhone?

What are the options for rendering the images proportionately?

We’re using jQuery.

Web page: http://www.panabee.com/potsticker

Answer 1

Your images are set to be 100% and 180px, so unless the browser is exactly 320px wide your images are going to get distorted.

You could set the .stream class to be 320px wide.

I’d recommend using an image tag.

Set the image width to 100%, and leave the height undefined. If you need to have the images be cropped, put them in an element and set the height and overflow.

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

Although it might be best to prepare your images ahead of time to have the same proportions.

If you need the image to be a bit more narrow, then you can set the width of the parent of element.

Also, you will probably want to use lower res images for mobile… those images are huge.