How to Resize Images with SwiftUI

Images are not always the exact size that we need. Depending on the situation you might have an image that is too big or too small. When we create an Image view in SwiftUI, it will automatically size itself according to the dimensions of its contents. And this tutorial leads you to resize an Image with SwiftUI.

Use the resizable Modifier on the Image Control

You should use .resizable() before applying any size modifications on an Image as the below code:

Image(room.thumbnailImage)
    .resizable()
    .frame(width: 32.0, height: 32.0)

Constrains the Image’s dimensions to the specified aspect ratio

Use aspectRatio(_:contentMode:) to constrain an image’s dimensions to an aspect ratio specified by a CGFloat using the specified content mode.

If this image is resizable, the resulting image will have aspectRatio as its aspect ratio. For example, the image has a 4:3 width-to-height ratio, and scales to fit its frame.

4:3 ratio
Image("image")
    .resizable()
    .aspectRatio(4 / 3, contentMode: .fit)

Notice that SwiftUI calls this the content mode and gives us two options: .fit means the entire image will fit inside the container even if that means leaving some parts of the view empty, and .fill means the view will have no empty parts even if that means some of our image lies outside the container.

Fixed-sized Images

Try .fit and .fill both to see the difference.

Use .fit

Use .fit

Use .fill

Use .fill

As you have seen that, the picture completely displays in the Image control when you use .fit, but the picture displays overbounds when you use .fill.

Resize images with GeometryReader

We are going to use GeometryReader to make sure our image fills the half width of its container view. GeometryReader is a view just like the others we’ve used, except when we create it we’ll be handed a GeometryProxy object to use. We can use this geometry proxy to set the width of our image as the below code.

GeometryReader { geo in
    Image("image")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: geo.size.width / 2, height: 300)
}

Conclusion

In summary, we have talked about how to resize images with SwiftUI. In addition, you also know more about the frame modifier to make a proper image alignment in its frame (read How to Align Items to the Leading in Picker for details). Then, for complicated UI design, the GeometryReader is the most important way to control how controls should be displayed on the screen.

Leave a Reply

Your email address will not be published. Required fields are marked *