Background image stretching in iPhone X

Question

Currently we are using image asset with @1x, @2x and @3x which will support for all devices. But when we use the same image asset for iPhone X, the @3x image looks stretched in

Answer 1

Images will only get stretches if you are using scaleToFill. Try changing the content mode of the UIImageView or whatever you are using to show the image.

Answer 2

THIS IS UNOFFICIAL TRICK TO DEFINE IMAGES FOR DIFFERENT SCREEN SIZES (iPhone XS Max, iPhone XS, iPhone Xr).

I found a trick. In my application we have launch screens for all iPhone Devices (see screenshot).

Next screen which appears after Launch screen is Login. It should have the same image like Launch screen. Unfortunately Xcode creates the following image set in Assets out of box (iPhone 1x, 2x, 3, iPad 1x, 2x - see image).

And during transitions from Launch Screen to Login screen I see artifacts because Image stretching on iPhone X, Xs Max, iPhone Xr

To fix the issue I copied Contents.json file from LaunchImage.launchimage folder to BackgroundImage.imageset folder in Finder (see steps on image below)

And now in Xcode I see the following templates. I can define background image for the following devices Retina HD 4.7"(iPhone 6, iPhone 7, iPhone 8), Retina HD 5.5" (iPhone 6 Plus, iPhone 7 Plus, iPhone 8 Plus), iPhone Xr, iPhone X/iPhone Xs, iPhone Xs Max

Answer 3

An alternative is to select Aspect Fill. Then lower down in attribute inspector select Clip to Bounds. The image will fill your UIIMageView, but based on the Aspect Ratio will clip it to "remove" that part of the image that doesn't fit the view.

The only way to avoid all of this is to have an image with an aspect ratio (width to height) that matches the aspect ratio of your UIImageView.