Image full screen width in SwiftUI

Question

I added an image to my body in a SwiftUI application and want to have that image cover the full width of the device, but not go over it.

In body, I return the image object:

var body: some View {
    Image("page-under-construction")
}

and the image shows up, however, it's too big:

I tried setting the frame: that affects the highlighted boundaries, but the image does not resize.
In combination, I played around with .aspectRatio(contentMode:), which did not seem to have any effect on the layout.

How can I have the image be effectively 100% of the screen width?

score 45 · Accepted Answer · answered Jun 05 '19 at 00:58

The reason .aspectRatio(contentMode:) had no effect on the layout is because you did not make the image resizable with resizeable().

Doing

var body: some View {
    Image("page-under-construction")
    .resizable()
    .aspectRatio(contentMode: .fill)
}

will cause the image to be the width of the screen, but the image's aspect ratio will not be maintained. To maintain the aspect ratio, do

var body: some View {
    Image("page-under-construction")
    .resizable()
    .aspectRatio(UIImage(named: "page-under-construction")!.size, contentMode: .fill)
}

This utilizes the .aspectRatio(aspectRatio: CGSize, contentMode: ContentMode) version of the method your original question discussed with a dummy UIImage to access the Image's original aspect ratio.

Note: The explicitly unwrapped optional (!) should not be a problem unless you are unsure if the image name is a valid one from your Assets folder. See this post for a comprehensive overview on Swift optionals.

I actually did find & try out `.resizable`, even in combination with `.aspectRatio`, but I did not provide `aspectRatio: CGSize`. Thanks for the hint! — LinusGeffarth, Jun 05 '19 at 06:41

score 19 · Answer 2 · answered Oct 11 '19 at 13:02

Here is how you add a background image and make it fill the full screen in SwiftUI

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.top)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Thanks for `edgesIgnoringSafeArea` – orkenstein Jun 25 '20 at 11:33 — orkenstein, Jun 25 '20 at 11:33

score 8 · Answer 3 · answered Jun 05 '19 at 00:52

8

Did you try resizable modifier?

struct ImageView: View {
var body: some View {
    Image("turtlerock")
    .resizable()
    .aspectRatio(contentMode: .fit)
}}

Note - There are 2 content modes: .fit and .fill

answered Jun 05 '19 at 00:52

SMP

1,629
7
15

I did, yes. The `.resizable()` modifier does indeed modify the image - it even has options for tiling or stretching the image - but then the image is not in its original aspect ratio. I combined that with the `.aspectRatio` modifier like you did, but that does not affect the image at all for me... – LinusGeffarth Jun 05 '19 at 06:39
I think this one should be the answer, just use content mode as .fit will do the thing. – Zhou Haibo May 13 '20 at 05:18

Image full screen width in SwiftUI

3 Answers3