SwiftUI - Image scaling destroys layout

Question

I want to scale my image to the full size of my view. I tried the solutions from this post: How to resize Image but I still did not manage to get it to work the right way.

It has the right padding to the top, left and right. But it does not have a padding to the random prize button like in the design I am trying to recreate.

Now this is almost perfect but I want it to have less padding to the left and right side.

This is my current Code for the main View:

GeometryReader { proxy in
                        let width = proxy.size.width
                        let height = proxy.size.height
                        
                            VStack(spacing: 0) {
                                TopBarView()
                                VStack {
                                ZStack {                                                ForEach(cards.reversed()) { card in
ImageCard(card)
                                                }
                                        } 
                                }
                                }.padding(.top, 8)
                                    .padding(.leading, 12)
                                    .padding(.trailing, 12)
                                    .padding(.bottom, 16)
                                HStack {
// Random prize Button
}.cornerRadius(6)
.padding(12)
                                
                                HStack {
                                    Button() {
                                    } label: {
                                        //Red Cross Button
                                    }.frame(width: width * (32 / 100), height: width * (32 / 100))
                                    .cornerRadius(100)
                                    Spacer()
                                    Button() {
                                        
                                    } label: {
                                        // eye Button
                                    }.frame(width: width * (19.733 / 100), height: width * (19.733 / 100))
                                        .cornerRadius(50)
                                    Spacer()
                                    Button() {
                                    } label: {
                                        // Checked Button
                                    }.frame(width: width * (32 / 100), height: width * (32 / 100))
                                    .cornerRadius(100)
                                }.frame(width: width  - 24)
                                    .padding(.leading, 12)
                                    .padding(.trailing, 12)
                            }
                        }

This is the ImageCard View:

VStack(alignment: .center) {
                card.image
                    .resizable()
                    .cornerRadius(8)
                    .scaledToFill()
            }.frame(maxWidth: .infinity, maxHeight: .infinity)

Is there a way to tell swift, that it should depend the size of the card using the padding from the top edge of the random prize button? So it does keep the right layout — MaxPayne777, Nov 02 '22 at 09:23
Can you include a [mre] and format your code (`ctrl-i` in Xcode)? — jnpdx, Nov 02 '22 at 14:19
use the .clipped() property with .scaledToFill() so that you image will clipped to the boundaries of give frame. Otherwise image span out of the frame with .scaledToFill() property. — Qazi Ammar, Nov 04 '22 at 05:44

MaxPayne777 · Accepted Answer · 2022-11-02T14:27:43.237

What I needed was another Stack around the VStack the Image is on, so that I can use .clipped().

Using this code leads to the result I wanted:

GeometryReader { proxy in
            let size = proxy.size
            
            let index = CGFloat(cardVM.getIndex(card: card))
            ZStack {
                VStack(alignment: .center) {
                    card.image
                        .resizable()
                        .cornerRadius(8)
                        .scaledToFill()
                        .clipped()
                }.frame(width: size.width, height: size.height)
            }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)

SwiftUI - Image scaling destroys layout

1 Answers1