Fullscreen image on different iOS iPhone sizes

Question

I am not ignorant of how many questions exist around the topic, I've read most and haven't been able to find a straight answer to what should be a common thing to do.

How does one handle full screen sized images on on different phone sizes?

Current strategy:

I'm using vectors so the idea is to create 3 vectors (PDF) in 3 different image assets:

Name: mypicture-320 Size: 320 x 568
Name: mypicture-375 Size: 375 x 667
Name: mypicture-414 Size: 414 x 736

Then when I want to get the image i'll do something in code like (pseudo code):

if iPhone5 {
    return mypicture-320
}
else if iPhone6 {
    return mypicture-375
}
else if iPhone6Plus {
    return mypicture-414
}

This feels wrong, like there should be a better way by now using only xcassets. Am I missing something?

Related question: If I chose not to use vectors then I'll need the following images:

Name: mypicture-320 Scale:@2 ActualSize: 640 x 1136
Name: mypicture-375 Scale:@2 ActualSize: 750 x 1334
Name: mypicture-414 Scale:@3 ActualSize: 1242 x 2208

Calling them in the same way as described earlier.

This makes no sense. If you have a vector image, you don't need three different images. You just need one image. That is the whole point of vector images. — matt
@matt and what would the size of that vector be? iPhone 6 and iPhone 5 have two different sizes with scale @2 — pflous
You may want to change your wording from size to ratio, as vector images are size-independent. — Cœur
@Cœur vectors in iOS are via PDF which does have a size and should be the size at scale "@1". Thats how xcode determines that size of png's to generate — pflous
"and what would the size of that vector be" Whatever size you set the containing image view to. And you have already said that it is "full screen". This is exactly the same as for normal PNG images. You don't have multiple PNG images for multiple screen sizes; you have one size in the correct resolution, and it is automatically sized down to fit the image view. Indeed, one might argue that your use of "vector" is just a red herring here. — matt

matt matt · Accepted Answer · 2016-12-07T16:35:56

How does one handle full screen sized images on on different phone sizes?

By putting a full sized image view on the different phone sizes. Constraints tie the edges of the image view to the edges of the screen (in effect), so that it fills the screen no matter how big the screen is. And use of the correct content mode causes the contained image to be resized to match.

If you need the image to stretch/tile in some special way so that it always fills the screen exactly, use a resizable image. With an asset catalog, you can configure this even more powerfully using Slicing than you can in code. For example, the screenshots below show an iPhone 4s and an iPhone 7; the image fills the screen on both, despite the great difference in size and aspect ratio.

Fullscreen image on different iOS iPhone sizes

2 Answers