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.
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.
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.