How to Clip an Image in SwiftUI?

SwiftUI – Clip Image

To clip an Image, while preserving the aspect ratio, and fill the given frame with a specific width and height, follow these steps.

1. Add aspectRatio() modifier with content mode set to fill.
2. Add frame() modifier and specify required width and/or height for the resulting clip.
3. Add clipped() modifier.

Example

In this example, we shall display an image from assets in two Image views. The first Image is clipped to a hight of 100 and width of 100. The aspect ratio is preserved and the Image is set to fill the space. The second image is not clipped.

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("sunrise")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 100, height: 100)
            .clipped()
        Image("sunrise")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(height: 100)
    }
}

Screenshot

Now, let us clip the image to different frame sizes.

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("sunrise")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 100, height: 100)
            .clipped()
        Image("sunrise")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 20, height: 100)
            .clipped()
        Image("sunrise")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 100, height: 150)
            .clipped()
    }
}

Screenshot

Summary

Summarising this SwiftUI Tutorial, we learned how to clip an Image to specific frame size in SwiftUI.