SwiftUI Field Guide

Image

An Image view has two modes: By default, it displays itself at its original size. Alternatively, we can make an image resizable, which will make it accept any proposal, stretching the image to fit inside the proposal exactly.

Code
Image("mountains")
Preview
200

Note that above, the image is stretched to fit the proposal, and the aspect ratio isn't preserved. To fix this, we can use the aspect ratio modifier with either fit or fill as the content mode. The aspect ratio modifier isn't image specific; it works by first getting the image's ideal size and then using that to either fit or fill the image within the proposed size.

Code
Image("mountains")    .resizable()    .aspectRatio(contentMode: .fit)
Preview
FitFill
200

Image Sizes

In SwiftUI, every image has a static size. In general, this is the pixel size of the image. For example, a 100×100 pixel image will be rendered as a 100×100 point image. If we load a static image from our bundle or the asset catalog, the scale factor is considered. For example, a 100×100 pixel image that's marked as 2× will be rendered at 50×50 points. We can also load images and specify the scale factor manually.

System Images

When we create system images using Image(systemName:), the image has a very different layout behavior. The system image is rendered at the current font size. While we can still make the images resizable, this is not recommended. Instead, we should use the font modifier to adjust the size of the image, as described on the Dynamic Type page.