0

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 iPhone X. So please let me know how to support for the iPhone X device with the same image asset or is there any solutions available to overcome this issue.

rmaddy
  • 314,917
  • 42
  • 532
  • 579
santhoshkumar
  • 191
  • 2
  • 10
  • don't let the background image stretched to fill then, user the _aspect fill_ to _aspect fit_ content modes, whichever serves your purpose better; you can find a few useful hint on the [iPhone X HIG](https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/) page from Apple. – holex Jan 22 '18 at 16:24

3 Answers3

2

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.

Martin Muldoon
  • 3,388
  • 4
  • 24
  • 55
0

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.

WYS
  • 1,637
  • 2
  • 16
  • 37
  • When we change content mode to aspect fit then we are seeing some empty spaces at bottom and top. When content mode set as aspect fill we are facing some content cutting at right and left – santhoshkumar Jan 22 '18 at 14:01
  • That is to be expected. You can not have single images that fit all aspect ratios. I suggest you revise your image strategy. – WYS Jan 23 '18 at 12:29
0

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). Lanuch screen example

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). Xcode generates Image Assets template

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) copy steps

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 Result

Ihar Katkavets
  • 1,510
  • 14
  • 25