README.md

GeometryReader

Gives you a GeometryProxy which lets us query our environment and set an image's size specifically.

VStack {
    GeometryReader { geo in
        Image("Example")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: geo.size.width, height: 300)
    }
}

Or to the full width of the screen depending on the device.

VStack {
    GeometryReader { geo in
        Image("Example")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: geo.size.width)
    }
}

Adjusting layout

Because GeometryReader wants to take all the space offered, adding one to your view will change the layout.

Layout not centered

If your layout looks off after wrapping, your can center it like this:

func button(for position: Position) -> some View {
    let tileState = viewModel.get(position)
    let reduceFactor = 0.9
    return GeometryReader { proxy in
    		GridButtonView()
            .frame(width: proxy.size.width, height: proxy.size.height)
    }
}

Stanford

Links that help

• Resizing images with GeometryReader
• Stanford