How to Resize an Image in SwiftUI

If you are an iOS Developer learning SwiftUI, understanding how to resize images is an essential skill when building modern iOS applications. Images play a significant role in creating attractive user interfaces, from profile pictures and product galleries to backgrounds and app icons. However, displaying an image at its original dimensions does not always produce the desired result.

In this tutorial, you will learn how to resize an image in SwiftUI using the .resizable() modifier, why it is useful, and how to control an image’s dimensions with other SwiftUI modifiers in Swift and Xcode.

Why Should We Resize Images in SwiftUI?

When displaying an image in an iOS application, we often need to adapt it to a specific layout. For example, a profile picture might need to fit inside a circular frame, while a product image should occupy a consistent amount of space in a shopping app.

Resizing images helps us create responsive layouts, maintain visual consistency, and make better use of available screen space. It is particularly important when developing applications for different iPhone and iPad screen sizes.

By learning how to resize an image in SwiftUI, you can ensure that images fit naturally into your interface without unnecessarily occupying too much space or disrupting the layout.

What Is the .resizable() Modifier in SwiftUI?

In SwiftUI, the Image view displays images from your asset catalog or other supported image sources. By default, SwiftUI renders an image using its original size and does not automatically scale it to fill a frame you specify.

The .resizable() modifier changes this behavior by allowing the image to be scaled to fit the available space.

It is important to understand that .resizable() does not resize the underlying image file. Instead, it makes the image view flexible, allowing SwiftUI to adjust how the image is rendered.

This modifier is particularly useful when combining images with other layout modifiers, such as .frame(), .scaledToFit(), and .scaledToFill().

Step 1: Add an Image to Your Xcode Project

First, open your project in Xcode and locate the asset catalog, usually named Assets.xcassets.

Drag an image into the asset catalog and give it a descriptive name, such as landscape.

Next, create a SwiftUI view and add the image:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("landscape")
    }
}

This code displays the image at its original size. If the image is larger than the available space, it might not fit your intended layout.

Let’s fix that by using .resizable().

Step 2: Use the .resizable() Modifier

To make an image resizable, add .resizable() directly after the Image initializer:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("landscape")
            .resizable()
            .frame(width: 300, height: 200)
    }
}

Here is what each modifier does:

• Image("landscape") loads the image from the asset catalog.
• .resizable() allows the image to scale.
• .frame(width: 300, height: 200) gives the image view a width of 300 points and a height of 200 points.

Notice that the image may appear stretched if its original aspect ratio differs from the specified frame. To avoid this, we can control how the image scales.

Step 3: Maintain the Image’s Aspect Ratio

When learning how to resize an image in SwiftUI, preserving the aspect ratio is often just as important as setting its dimensions.

SwiftUI provides two useful modifiers for this purpose.

Using .scaledToFit()

The .scaledToFit() modifier scales the image to fit within the available frame while preserving its original proportions.

Image("landscape")
    .resizable()
    .scaledToFit()
    .frame(width: 300, height: 200)

This approach ensures that the entire image remains visible, although empty space may appear inside the frame.

Using .scaledToFill()

The .scaledToFill() modifier scales the image to fill the available frame while maintaining its aspect ratio.

Image("landscape")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 200)
    .clipped()

Because the image fills the entire frame, some parts may extend beyond its boundaries. The .clipped() modifier hides the overflow, making this approach useful for thumbnails, banners, and image cards.

Step 4: Create a Circular Profile Image

A common use case for image resizing in SwiftUI is displaying a profile picture.

You can combine .resizable(), .scaledToFill(), .frame(), .clipShape(), and .clipped() to create a circular image:

Image("profile")
    .resizable()
    .scaledToFill()
    .frame(width: 120, height: 120)
    .clipShape(Circle())
    .clipped()

This example creates a circular profile image measuring 120 by 120 points. The image fills the frame, and the Circle() shape masks the image into a circle.

Conclusion

Learning how to resize an image in SwiftUI is an important step for any iOS Developer working with Swift and Xcode. The .resizable() modifier allows images to adapt to your interface, while .frame(), .scaledToFit(), and .scaledToFill() help you control their size and appearance.

Whether you are building profile screens, product galleries, or image-based layouts, understanding these modifiers will help you create polished and consistent iOS applications.

Practice these examples in SwiftUI, experiment with different frame dimensions, and choose the scaling behavior that best suits your design.