SwiftUI – How to frame an Image

Share on facebook
Share on twitter
Share on pinterest

Wanna know how to frame an Image properly in SwiftUI? Here you go! 👇

Step 1: Apply to .resizable modifier to your Image object. This modifier enables to resize and frame the image properly

Step 2: When changing the size of your Image you normally want to keep the original dimensions. For this purpose, add the .aspectRatio modifier. You can choose between the .fill content mode which ensures that the whole frame gets filled out with the Image and the .fit content mode which instead ensures that the whole Image fits within the frame.

Step 3: Now you can declare the frame for the Image


Step4: Add the .clipped modifier for making sure that any parts of your Image exceeding the frame get cut off.

import SwiftUI
    struct ContentView : View {
    var body: some View {
        Image("dog")
            //Enable size editing for the Image
            .resizable()
            //Define which method to use to keep the original dimensions when resizing
            .aspectRatio(contentMode: .fill)
            //Declare the frame for your image
            .frame(width: 380, height: 280)
            //Cut out the exceeding parts of the image
            .clipped()
    }
}

And this is how you frame an Image in SwiftUI!


I hope you enjoyed this tutorial! If you want to learn more about SwiftUI, make sure you check out our free SwiftUI Basics eBook and our other tutorials! Also make sure you follow us on Instagram and subscribe to our newsletter to not miss any updates, tutorials and tips about SwiftUI and more!

Leave a Reply

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

small_c_popup.png

Covid-19 Forces you into quarantine?

Start Mastering swiftUI Today save your 33% discount

small_c_popup.png

Are you ready for a new era of iOS development?

Start learning swiftUI today - download our free e-book