Why is are the images being cut off?

Question

The images in my 'tiles' are being cut off at the sides. I am trying to create a tile for each 'product' that displays an image, name and subtitle. Everything now works as it should besides the image. This is because the images on the tiles are being cut off at the sides.

The view for the ContentView is as follows:

     ScrollView(.vertical, showsIndicators: false, content: {
                    
                    Spacer()
                    LazyVGrid(columns: Array(repeating: GridItem(.flexible(),spacing: 15), count: 2),spacing: 10){
                        
                        ForEach(HomeModel.filteredProduct){product in
                            
                            // Product View...
                            
                                
                                ProductView(productData: product)
                                .background(.white)
                                .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous))
                                .shadow(color: .black.opacity(0.4), radius: 3, x: 1, y: 1)
                                    .onTapGesture {
                                        
                                        withAnimation(.easeIn){
                                            
                                            selectedProduct = charity
                                            show.toggle()
                                        }
                                    }
                        }
                    }
                    Spacer()
                    .padding()
                    .padding(.top,10)
                })
                .padding(.top, 20)

And the ProductView code is as follows:

    var body: some View {
    
        
            VStack(alignment: .center, spacing: 0) {
                
                WebImage(url: URL(string: productData.product_image))
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 160, height: 225)
                    .cornerRadius(15)
                    .clipped()
                    .padding(5)
               
            Text(productData.product_name)
                .font(.title2)
                .fontWeight(.bold)
                .foregroundColor(.black)
                .padding()
            
                
            Text(productData.product_type)
                .font(.caption)
                .foregroundColor(.gray)
                .lineLimit(2)
                .padding()
        }
}

Here is an image showing what is meant by 'the tile is cutting it off':

As you can see in the photo, the image is not all included because it doesn't fit in the tile. This needs to be resized.

Answer 1

The first issue here would be the .contentMode modifier it needs to be set to fill. If you have an image where the width is larger then the height but you set the frame at a different aspect ratio you will see a white space above and below the image.

But there were other problems too. You need to clip an image with the .clipped() modifier after you set its frame, else it will overflow the frame. Why all those ZStacks ? I cannot see any purpose of adding a ZStack with only one child.

---

BUT:

As your code is not reproducible i had to add or remove several things to make it work. So you need to adopt this to your code.

---

Solution:

struct ContentView: View{
    
    @State private var products: [ProductData] = [ProductData(product_name: "test", product_details: "test"), ProductData(product_name: "test2", product_details: "test2"), ProductData(product_name: "test3", product_details: "test3")]
    @State private var show = false
    @State private var selectedProduct: ProductData?
    
    var body: some View{
        ScrollView(.vertical, showsIndicators: false, content: {
            Spacer()
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(),spacing: 15), count: 2),spacing: 10){
                
                ForEach(products){product in
                    // Product View...
                    ProductView(productData: product)
                        .background(.white)
                        .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous))
                        .shadow(color: .black.opacity(0.4), radius: 3, x: 1, y: 1)
                        .onTapGesture {
                            withAnimation(.easeIn){
                                selectedProduct = product
                                show.toggle()
                            }
                        }
                }
            }
            Spacer()
                .padding()
                .padding(.top,10)
        })
        .padding(.top, 20)
    }
}

struct ProductData: Identifiable{
    var id = UUID()
    var product_name: String
    var product_details: String
}


struct ProductView: View{
    var productData: ProductData
    
    var body: some View{
        VStack(alignment: .center, spacing: 0) {
            Image("test")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 160, height: 225)
                .cornerRadius(15)
                .clipped()
                .padding(5)
            
            Text(productData.product_name)
                .font(.title2)
                .fontWeight(.bold)
                .foregroundColor(.black)
                .padding()
            
            Text(productData.product_details)
                .font(.caption)
                .foregroundColor(.gray)
                .lineLimit(2)
                .padding()
        }
        
    }
}

---

Outcome: