Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

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

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

Tags:

2

Answers


  1. 0

    Does this work?

    VStack(spacing: 8) {
        Image(uiImage: image)
            .resizable()
            .scaledToFill()
        
        ZStack {
            Image(uiImage: image)
                .resizable()
                .scaledToFill()
            Image(uiImage: image)
                .resizable()
        }
    }
    Login or Signup to reply.
  2. 0

    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()
    })
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search