Centering an image with edgesIgnoringSafeArea(.all)

user_7356039 0
Viewed 347

I am trying to center an image within the screen. It goes should fit the height but stretch the width outside the screen to keep it proportional. The image properly sizes and centers itself normally, but as soon as I add .edgesIgnoringSafeArea(.all) the image gets off-centered. I don't know if this is a bug, but I am just starting up with it SwiftUI so there may be a simple answer.

Without .edgesIgnoringSafeArea(.all)

struct ContentView: View {
    var body: some View {
        Image("background_rain")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
    }
}

Output:

first image

With .edgesIgnoringSafeArea(.all)

struct ContentView: View {
    var body: some View {
        Image("background_rain")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .edgesIgnoringSafeArea(.all)
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
    }
}

Output:

second image

Thank you in advance

swiftui swift
2 Answers

Here is a solution

    Color.clear.overlay(
      Image("background_rain")
        .resizable()
        .aspectRatio(contentMode: .fill)
    )
    .edgesIgnoringSafeArea(.all)

demo

user_122990300

I also figured this out by setting the maxWidth to the screen size

GeometryReader { geo in
    Image("background_rain")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(maxWidth: geo.size.width)
        .edgesIgnoringSafeArea(.all)
}
user_73560390
Related