Image is too big while navigating with Navigation Link-CodePudding

I have encountered a problem with image displaying. I'm navigating to a view with background image and when I do that the entire image is closing the screen. Like that. I've tried to use Geometry Reader, but It didn't help. Need your assistance.

VStack {


// CONTENT HERE

}
            .background (

                ZStack{
                    Image("lake")
                        .resizable()
                        .ignoresSafeArea()
                        .scaledToFill()

                    
//                    LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom)
//                        .ignoresSafeArea()
//                        .aspectRatio(contentMode: .fill)
                    
                }
                
            )
.navigationBarTitle("", displayMode: .inline)
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)

CodePudding user response：

You should add .clipped after .background

CodePudding user response：

Your image is too big so it's bleeding out of your view. In order to prevent that you can use .clipped() after .background. This will "clip" the view to make sure none of its contents are rendered outside of its frame.

CodePudding user response：

After implementing your Image, you should use .frame to set height and width to your image.

Example:

ZStack{
   Image("lake")
      .resizable()
      .scaledToFill()
      .frame(width: 400, height: 400) //This will make your image square. You can choose the size you want.
}