Is there a way to have two images in a VStack and have the images resized and scaledToFill? SwiftUI

user_2318015 0
Viewed 661

I have two images in a VStack and both images being resizable. One of the image is set to fill with clipped.

VStack(spacing: 8) {
    Image(uiImage: project.image!)
        .resizable()
        .aspectRatio(contentMode: .fill)
    ZStack {
        Image(uiImage: UIImage(named: "ic_add_project")!)
        Image(uiImage: UIImage(named: "corner_pages_72pt")!)
            .resizable()
    }
}

I have almost the result I wanted by removing .aspectRatio(contentMode: .fill) but the top image get stretch and distorted.

Stretch

How can I set two images one on top of each other with the same size and have the image scaledToFill so it doesn't get stretch? I can't use fixed frame size, I'm hoping to distribute the images evenly between the stacks.

Broken

swiftui swift xcode widget
2 Answers

Try to put them into overlay of color. Color fills available space, so two colors fill space equally, and images in overlay should be sized as specified not affecting each other.

VStack(spacing: 8) {
    Color.clear.overlay(
       Image(uiImage: project.image!)
        .resizable()
        .aspectRatio(contentMode: .fill)
    )
    Color.clear.overlay(
      ZStack {
        Image(uiImage: UIImage(named: "ic_add_project")!)
        Image(uiImage: UIImage(named: "corner_pages_72pt")!)
            .resizable()
    })
}
user_122990300

Does this work?

VStack(spacing: 8) {
        Image(uiImage: image)
            .resizable()
            .scaledToFill()
        
        ZStack {
            Image(uiImage: image)
                .resizable()
                .scaledToFill()
            Image(uiImage: image)
                .resizable()
        }
    }
user_112799710
Related