SwiftUI Image scaledToFill layout behaviour

Question

In my iOS 14 Widget I want to display several circular images in a row.

When using scaledToFit() the image stretches weirdly to fit the circle. scaledToFill() gives me the desired output like so:

Image("Person")
    .resizable()
    .scaledToFill()
    .clipShape(Circle())

But this changes the behaviour of the view to ignore it's parent and expand beyond it. Setting a fixed frame prevents this, but I need these Images to resize dynamically. When I place this View inside an HStack in my Widget the Images are way too large.

How can I get the image to scale like scaledToFill() and still respect the parent view.

score 1 · Answer 1 · answered Aug 18 '21 at 09:10

I found it works best when wrapping the GeometryReader directly into the Image

HStack {
    GeometryReader { geo in
        Image("Person")
          .resizable()
          .scaledToFill()
          .frame(width: geo.size.width, height: geo.size.height)
    }
}

score 0 · Answer 2 · answered Mar 16 '21 at 17:41

You can try using geometry reader. This is an example code of what I have used in my Widget so you have to adjust it for your project, however, you will get the idea.

GeometryReader { geo in
        ZStack(alignment: .bottom) {
        HStack {
               Image("Person")
                    .resizable()
                    .frame(width: geo.size.width, height: geo.size.height)
                    .aspectRatio(contentMode: .fit)
            }
        }
    }

score 0 · Accepted Answer · answered Mar 17 '21 at 14:29

I found a solution in this post, the first answer works great in the Widget:

stackoverflow.com/questions/58290963/clip-image-to-square-in-swiftui

However I am reusing the view within my app and it caused some weird behaviour there. Instead I am now clipping the Image to a Circle before the View is created. This allows me to use .scaledToFit() and still maintain the original aspect ratio of the image.

SwiftUI Image scaledToFill layout behaviour

3 Answers3