How to display, scale, and resize an image
Images, along with shapes, colors, and texts, are essential ingredients of all applications UIs. Displaying images in SwiftUI is easy. You have to add your image file to the assets catalog and then use Image view to present it on screen.
You will quickly notice that the image doesn't fit your view. It works that way because raw Image view will display assets in real size. To fix this, you have to apply a resizable modifier. You usually will be using the default parameters, but you can control which part of the image is resizable and decide how an image should arrange the space (
There is a high chance that an effect still won't fit your needs. Your image file may have a different aspect ratio than the space that the Image view has. You can use one of the three modifiers below to fix that issue.
Scale to Fit
scaledToFit modifier will make your image to fit fully into a space given by Image view. It will preserve an aspect ratio of an original file. It may result in empty spaces on the bottom and top (or left and right) of that view.
Image("logo") .resizable() .scaledToFit()
Scale to Fill
If you don't want empty spaces and it is not that important to you to be sure that the image is visible entirely, you can use the
scaledToFill modifier. With it, your file will fill a full view, its aspect ratio also will be preserved, but it may be cropped on edges.
Image("logo") .resizable() .scaledToFill()
Resizable and scaled modifiers often came together. Learn how to refactor a code and create a custom modifier.
Custom Aspect Ratio
With the aspectRatio modifier, you can get more control over how an image is displayed. You can provide two parameters to its ratio of width to height (unnamed parameter represented
contentMode (it can be set to
Image("logo") .resizable() .aspectRatio(6, contentMode: .fit)
contentMode itself allows you can achieve the same effect that
scaledToFit offers. But since those two are more readable, use them first and
aspectRatio modifier only when necessary.
Want to test it yourself? Download this Xcode Playground.