iPhone X背景图片拉伸问题：如何用现有@1x/@2x/@3x资源适配？

Hey there, I’ve dealt with this exact problem when transitioning apps to support iPhone X, so let’s break down practical solutions using your existing @1x/@2x/@3x image assets:

1. Fix the Content Mode First (Most Common Fix) #

9 times out of 10, stretching happens because your image view is set to UIViewContentModeScaleToFill, which forces the image to fit the view’s bounds without preserving aspect ratio.

• In Storyboard/XIB: Select your image view, go to the Attributes Inspector, and change the "Content Mode" to either:
  • Scale Aspect Fit: Keeps the image’s original ratio, fits it entirely within the view (may leave blank space around edges)
  • Scale Aspect Fill: Fills the entire view while preserving ratio (may crop parts of the image, but no stretching)
• In Code: Set this programmatically:

  // Swift
  imageView.contentMode = .scaleAspectFit // or .scaleAspectFill
  // If using Aspect Fill, don't forget to clip the excess:
  imageView.clipsToBounds = true
  

  // Objective-C
  imageView.contentMode = UIViewContentModeScaleAspectFit; // or UIViewContentModeScaleAspectFill
  imageView.clipsToBounds = YES;
  

2. Adjust Layout Constraints for iPhone X’s Safe Area #

iPhone X has a notch and home indicator, so if your image is pinned directly to the superview’s edges instead of the safe area, it might get stretched to fill the extra space.

• Update your Auto Layout constraints to pin the image view to the safe area layout guides instead of the superview’s top/bottom edges.
• For background images that need to fill the entire screen (including under the notch), keep the constraints to superview edges but pair it with Scale Aspect Fill content mode and clipsToBounds = true—this will crop the image slightly instead of stretching it.

3. Use Resizable Image Slices (For UI Elements Like Buttons/Bars) #

If you’re dealing with reusable UI elements (like rounded buttons, navigation bars) that stretch, turn your existing @3x image into a resizable slice:

• In Xcode’s Asset Catalog, select your image set, then in the Attributes Inspector:
  1. Check "Resizable"
  2. Set "Slicing" to "Horizontal and Vertical"
  3. Drag the slice handles to mark the non-stretchable edges (e.g., the rounded corners of a button)
• This tells iOS to only stretch the middle portion of the image, keeping edges intact regardless of the view’s size.

4. Extend Background Images Without Re-Creating Assets #

If your @3x background image is smaller than iPhone X’s 1125x2436px resolution, you can extend it using subtle color fills or gradients instead of making a new image:

• Add a background view behind your image view, set its color to match the top/bottom edges of your existing image.
• Or use Core Graphics to draw a gradient that blends with your image’s edges, then layer it on top/bottom to fill the extra space. This avoids stretching the original image while making it look seamless.

内容的提问来源于stack exchange，提问作者santhoshkumar