LaunchScreen.storyboard appearing differently on devices than in Xcode?

Question

I am attempting to customize the default LaunchScreen.storyboard of my Flutter app. I simply have a red background on the default View , and I added an Image View as a child of it. This Image View is centered on the screen and renders an image that I have added to "Assets.xcassets" with all 3 sizes. Below is a preview of what my Xcode displays:

However, this storyboard renders differently on devices than it appears in Xcode. For example, it appears slightly off-centered on iPhone 12, and it is scaled up too high for iPhone 6s and is way off-centered. See below for screenshots:

As you can see, the storyboard renders differently on the two devices. How can I make the storyboard appear the same on both devices as it does in Xcode? Any help is appreciated. If I used any incorrect terminology or need to provide additional details, please let me know as I have minimal experience using Xcode.

Answer 1

From the storyboard screenshot attached, it looks like there are no constraints added to the UIImageView .

You should add top , leading , bottom & trailing constraints to superview with 0 spacing to achieve what you want.

UPDATE

Above is applicable to the case when you have a small size image like 100x100 or similar that can easily fit on all screen sizes. In the comments, we see that image is way too big and we want to keep it in center while occupying 50% of screen width.

Remove the leading and trailing constraints, select the imageView and it's superview - add equal widths constraint with a multiplier of 0.5 , this will make sure that imageView will always occupy 50% of the superview's width.

Also add horizontally center constraint on the imageView. Make sure imageView Content Mode is set to Aspect Fit .