Sizing image properly for iOS retina and non-retina screens
How could my 640x960 images for the iPhone retina screen also be usable for the earlier 320x480 screen? They should fit the screen neatly in both screen sizes; right now the image exceeds the smaller screen instead of shrinking to fit. (Application: tapping a thumbnail of the image should enlarge it to fill the screen for wallpaper capture on either device.)
iOS does not automatically scale your images. So you you have to have a 320x480 image called image.png. Then the same image double the size called image@2x.png. You have to have double of all your images to support both devices.
Why does it not shrink to fit, did you apply max-width:100%; ?
There is another technique you could use where you embed a transparent gif as the image src and then apply different background images within the media queries to target different screen sizes, serving up the correct image with the correct dimensions.
Posting Permissions
Reply With Quote
Bookmarks