35 - Show Images with Different Aspect Ratios in SwiftUI

In SwiftUI, the Image view displays a single image or a sequence of animated images. By default, an image is displayed with its original aspect ratio. However, the .aspectRatiomodifier allows us to adjust the aspect ratio of the image to fit our needs.

The .aspectRatio modifier takes two arguments: aspectRatio and contentMode. aspectRatio is a CGFloat representing the ratio between the image’s width and height.contentMode specifies how the image should be resized and positioned within the available space. The available content mode options are .fit, which resizes the image to fit the available space while maintaining its aspect ratio or .fill, which allows the image to fill up all the available space.

In the following example, you display an image with an aspect ratio of 2:1, meaning the image’s width will be set to exactly twice its height:

struct ContentView: View {
  var body: some View {
    Image("HelloHedgy")
      .resizable()
      .aspectRatio(2, contentMode: .fit)
  }
}

Note: If you want to try out the examples, you can download an archive of all the images used in this section here.

The preview should look as follows:

SwiftUI lets you easily change an image's aspect ratio.

Here’s what’s happening in this code:

• Image("HelloHedgy") displays an image in the view. It assumes that there is an image named HelloHedgy included in the asset catalog of your project.

• .resizable() makes the image resizable, allowing it to scale up or down based on the frame you set.

.aspectRatio(2, contentMode: .fit) sets the aspect ratio of the image. The first parameter, 2, represents the width-to-height ratio of 2:1. This means that the width of the image will be twice the height. The contentMode parameter is set to .fit, which ensures that the image maintains its aspect ratio while fitting within the available space.

By combining these modifiers, the code displays an image named HelloHedgy that is resizable and has a 2:1 aspect ratio, where the width is twice the height. The image will scale up or down while preserving the aspect ratio and fit within the available space.

Unfortunately, the little cartoon hedgehog looks a bit squashed with these settings. To display an image with a different aspect ratio, simply adjust the values passed to the .aspectRatio modifier. For example, to display this image with an aspect ratio of 1:1, you could use:

struct ContentView: View {
  var body: some View {
    Image("HelloHedgy")
      .resizable()
      .aspectRatio(1, contentMode: .fit)
  }
}

Here’s what the preview should look like now:

Setting aspect ratio to 1 creates a square image in SwiftUI.

Ah, much better!

Using the .aspectRatio modifier and the available content mode options, you can easily display images with different aspect ratios in SwiftUI.