SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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.)

  2. #2
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,873
    Mentioned
    44 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •