How to resize image and keep aspect ratio in SwiftUI

A picture is worth a thousand words, but a poorly resized image in your application can ruin a thousand lines of perfect code.

If you’ve started working with SwiftUI, you’ve likely encountered this classic scenario: you drag a high-resolution image into your asset catalog (Assets.xcassets), type Image("mySpectacularPhoto") into your view, run the simulator, and… disaster. The image is so huge that you only see the top-left corner, pushing all your text and buttons off the screen.

Unlike other older UI frameworks where images often tried to fit by default, SwiftUI takes a different approach. By default, an Image view in SwiftUI takes up the exact size of the pixels in the original image. If the image is 4000×3000 pixels, SwiftUI will attempt to render a view of 4000×3000 points.

The challenge isn’t just making the image smaller; it’s doing so while maintaining its aspect ratio. We don’t want our users to look vertically stretched or horizontally squashed. We want the image to adapt to our UI design naturally, whether on the giant screen of an iMac, an iPhone 15 Pro Max, or the tiny face of an Apple Watch Ultra.

In this comprehensive tutorial, we will break down SwiftUI’s image management system about how to resize image in SwiftUI and keep aspect ratio moving from basic concepts to advanced techniques to ensure your apps look professional on any device.

1. The Crucial First Step: .resizable()

The number one mistake beginners make is trying to apply a .frame() modifier directly to an image to change its size without first telling it that it can change size.

// ❌ THIS WON'T WORK AS EXPECTED
Image("landscape_4k")
    .frame(width: 300, height: 200)
// Result: The view frame will be 300x200, but the image inside
// will still display at full size, spilling out of the frame.

In SwiftUI, the .frame() modifier doesn’t resize the content of a view; it only suggests the size of the container where that view lives. A standard Image is stubborn: it insists on displaying at its native size.

To negotiate with it, we need the .resizable() modifier.

What exactly does .resizable() do?

When you apply .resizable() to an Image, SwiftUI doesn’t just change a property. It actually wraps the image in a new view that has the ability to stretch and shrink to fill the space offered to it.

// ✅ The correct first step
Image("landscape_4k")
    .resizable()
// Result: The image will now try to occupy ALL available space
// on the screen, ignoring its original aspect ratio.
// It will look terrible and stretched, but it is now responsive to size.

Once the image is resizable, it will behave like any other flexible shape in SwiftUI (like a Rectangle() or Color.blue), greedily expanding until it touches the edges of its parent view.

2. The Golden Rule: Maintaining Aspect Ratio

Aspect ratio is the proportion between the width and height of an image. A standard photo is usually 4:3 or 3:2; a modern video is 16:9. Breaking this ratio is the cardinal sin of UI design.

SwiftUI offers two main tools to manage this after using .resizable(). Both are based on the .aspectRatio(contentMode: ...)modifier.

Option A: .scaledToFit() (The Safe Option)

.scaledToFit() is a convenient shortcut for .aspectRatio(contentMode: .fit).

It tells the image: “Grow as much as you can until one of your sides (width or height) touches the edges of the container, but make sure the entire image is visible without distortion.”

• The Result: The image will maintain its proportions. If the container is wider than the image, there will be empty space (letterboxing) on the sides. If the container is taller, there will be empty space above and below.
• When to use it: When the content of the image is critical and nothing can be cropped. Examples: product photos in a store, document viewing, full logos.

VStack {
    Text("Mode: .scaledToFit()")
    
    Image("landscape_4k")
        .resizable()
        .scaledToFit() // Maintains proportion, nothing gets cut.
        .frame(width: 300, height: 300)
        .border(Color.red) // To see the container
}

In this example, if the image is landscape, inside the red 300×300 box, you will see the image centered with empty bands above and below.

Option B: .scaledToFill() (The Immersive Option)

.scaledToFill() is a shortcut for .aspectRatio(contentMode: .fill).

It tells the image: “Grow until you completely fill the container. Keep your proportions, which means you will likely have to crop parts of the image that stick out of the container.”

• The Result: The image fills the entire space without distortion, but you will lose the edges of the image if its aspect ratio doesn’t match the container’s exactly.
• When to use it: Backgrounds, user avatars in circles, thumbnails in a grid where visual uniformity is more important than seeing every pixel of the original image.

Important warning with .scaledToFill(): By default, the part of the image that “sticks out” of the container remains visible, bleeding over other views. You will almost always want to pair this modifier with .clipped().

VStack {
    Text("Mode: .scaledToFill() + .clipped()")
    
    Image("landscape_4k")
        .resizable()
        .scaledToFill() // Fills space, might crop.
        .frame(width: 300, height: 200)
        .clipped() // CRITICAL! Cuts off what protrudes from the 300x200 frame.
}

3. Controlling Space: Interaction with .frame()

Now that we know how to make the image behave correctly within a space, we need to define that space.

Modifier order is vital in SwiftUI. The general rule is: First prepare the image (resizable, aspectRatio), then define the container (frame).

Fixed Frames vs. Flexible Frames

In modern development for multiple devices (iPhone SE vs. iPhone 15 Pro Max, or a macOS window the user can resize), fixed frames (width: 200) are sometimes necessary but often problematic.

The Flexible Approach (Recommended)

Instead of forcing an exact pixel size, I suggest using flexible constraints whenever possible.

Imagine you want a header image in an iOS app that takes up the full width and has a maximum height of 250 points, using .scaledToFill.

Image("article_header")
    .resizable()
    .scaledToFill()
    // We don't define a fixed width, we let it use available space.
    // We define a flexible height with a maximum.
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 250)
    .clipped()

This code works beautifully. On a narrow iPhone, the image will be shorter to maintain proportion before hitting the maxHeight. On an iPad, it will expand width-wise, and reach up to 250 in height, cropping the top and bottom excess if necessary.

Using GeometryReader for Relative Proportions

Sometimes, the design requires an image to be exactly, say, 50% of the screen width, or to maintain a specific aspect ratio in its container (like a 16:9 video), regardless of the original image size.

To force a container to a specific proportion (e.g., a perfect square) before putting the image inside, you can use a different overload of .aspectRatio:

Image("user_avatar")
    .resizable()
    .scaledToFill() // Fills the square
    // Forces the image container to always be 1:1 (square)
    .aspectRatio(1.0, contentMode: .fit) 
    .frame(width: 150) // We only need to define one dimension
    .clipShape(Circle()) // A classic round avatar

If you need the size to depend on the parent in a complex way, GeometryReader is your friend, although it can be overkill for simple image tasks.

GeometryReader { geometry in
    Image("complex_background")
        .resizable()
        .scaledToFill()
        // The image will be exactly half the device width
        .frame(width: geometry.size.width * 0.5) 
        .clipped()
}

4. Cross-Platform Considerations: iOS, macOS, and watchOS

Although the SwiftUI code (Image().resizable().scaledToFit()) is the same on all platforms, the design context changes drastically.

iOS (iPhone and iPad)

The most common environment. Here you deal with device orientation (portrait/landscape) and the vast screen difference between an iPhone SE and a 12.9″ iPad Pro.

• Tip: Use .scaledToFill() for backgrounds and .scaledToFit() for content inside VStack or HStack. Rely heavily on maxWidth: .infinity so images adapt to the device width.

macOS

The challenge here is that the user has full control over window size. Your image must look good whether the window is tiny or full screen on a 5K monitor.

• Tip: .scaledToFit() is often safer on macOS to avoid aggressive cropping when the user makes the window very narrow or very wide. If using .scaledToFill(), make sure the focal point of the image is in the center, as the edges are volatile.

// Typical macOS example: Sidebar icon
Image(systemName: "gear")
    .resizable()
    .scaledToFit()
    .frame(width: 24, height: 24) // Fixed small size for UI icons
    .foregroundColor(.secondary)

watchOS

Space is the most expensive luxury. On a 41mm Apple Watch, every pixel counts.

• Tip: Avoid .scaledToFit() if it creates large empty spaces (letterboxing), as it wastes valuable screen real estate. Often, you will design your image assets specifically for the watch to fit perfectly, or use .scaledToFill() with .clipShape(Circle())to match the aesthetic of complications and system avatars.

// watchOS Example: Background image filling the face
Image("watch_background_texture")
    .resizable()
    .scaledToFill()
    .edgesIgnoringSafeArea(.all) // To touch the physical edges of the watch

5. Working with Remote Images: AsyncImage

In the real world, images are rarely all in the application bundle. They come from the internet. Since iOS 15 / macOS 12, SwiftUI introduced AsyncImage to simplify this.

Size and aspect ratio management work the same way, but you must apply it to the image once it has downloaded, not to the AsyncImage loader itself.

AsyncImage(url: URL(string: "https://example.com/large-image.jpg")) { phase in
    switch phase {
    case .empty:
        // Placeholder while loading
        ProgressView()
            .frame(width: 200, height: 200)
            
    case .success(let image):
        // Here is where we apply our magic!
        image
            .resizable() // 1. Make it resizable
            .scaledToFill() // 2. Choose aspect mode
            .frame(width: 200, height: 200) // 3. Define the frame
            .clipped() // 4. Crop excess
            .cornerRadius(12)
            
    case .failure:
        Image(systemName: "photo.fill.on.rectangle.fill")
            .font(.largeTitle)
            .foregroundColor(.gray)
            .frame(width: 200, height: 200)
            
    @unknown default:
        EmptyView()
    }
}

Notice how the .resizable() and .scaledTo... modifiers are applied to the resolved image object inside the .success case, not to the outer AsyncImage container.

6. Performance and Best Practices

Resizing images in real-time has a CPU and memory cost. If you have a list (List or ScrollView) with 100 rows, and each row resizes a 4K image to a 50×50 avatar, your application will stutter when scrolling, especially on older devices or the Apple Watch.

1. Use the right size: If you only need to show a 100×100 thumbnail, do not download or load a 5MB image. Ask your backend for a smaller version.
2. Asset Catalogs: For local images, always use Assets.xcassets and provide the @1x, @2x, and @3x versions. iOS will automatically choose the most memory-efficient version for the current device’s screen density, saving resizing work for the system.
3. .antialiased(true): If you are heavily reducing an image (downsampling) and see jagged edges or visual artifacts, you can try adding the .antialiased(true) modifier after .resizable() to smooth the result, although with a slight performance cost.

Conclusion

Handling images in SwiftUI might seem frustrating at first, but once you understand the “dance” of the three steps, it becomes intuitive:

1. .resizable(): Gives the image permission to change size.
2. .scaledToFit() / .scaledToFill(): Defines how it should change size respecting its original aspect ratio.
3. .frame(...): Defines the boundaries of the space where the image must perform step 2.

Mastering these modifiers gives you total control over how your application looks across Apple’s vast ecosystem of screens. You no longer need to fear giant images; now you have the tools to tame them.

If you have any questions about this article, please contact me and I will be happy to help you 🙂. You can contact me on my X profile or on my Instagram profile.