---
title: "Aspect Ratio"
description: "How to use the aspect ratio modifier in SwiftUI"
url: https://www.swiftuifieldguide.com/layout/aspect-ratio
markdown_url: https://www.swiftuifieldguide.com/layout/aspect-ratio.md
---
> Convenience Markdown export of the HTML page. Interactive samples, diagrams, and visualizations stay on the canonical page.
# Aspect Ratio

The most common usage of aspect ratio is in combination with a resizable [image](/layout/image), as shown below. The modifier ensures that the image always maintains the correct aspect ratio while resizing. Note that using `fill` as the content mode will draw the image out of bounds.

> Interactive example on HTML page: Image With Aspect Ratio.

The aspect ratio modifier isn't specific to image views, but it can be applied to any type of view. For example, here we're rendering a color with a fixed aspect ratio of 16×9. The color always fits or fills the available space using the provided aspect ratio.

> Pretty-printed code from Rectangle16by9

```txt
Color.pink
    .aspectRatio(16/9, contentMode: .fit)
```

> Interactive example on HTML page: Rectangle16by9.

In the initial image example, we didn't specify a fixed aspect ratio. By leaving the parameter off, the underlying view's [ideal size](/layout/ideal-size) is used to compute the aspect ratio. To compute the ideal size, the aspect ratio first proposes a `nil×nil` size to its child. The child's ideal size is used as the aspect ratio, and the aspect ratio then either fits or fills a rectangle with the computed ratio within its proposal.

> Interactive example on HTML page: Image With Aspect Ratio Proposal.

When we're loading an image, sometimes we know the size of the image but don't have the image cached. In this case, we can use `aspectRatio` to display a placeholder with the correct aspect ratio. If the placeholder itself is, for example, text, we can wrap it in a [flexible frame](/layout/flexible-frames) to make sure it accepts the proposed size.

> Pretty-printed code from Aspect Text Frame

```swift
Text("Hej!")
    .frame(minWidth: 0,
           maxWidth: .infinity,
           minHeight: 0,
           maxHeight: .infinity)
    .background(.teal)
    .aspectRatio(16/9, contentMode: .fit)
```

> Interactive example on HTML page: Aspect Text Frame.

## Gotchas {#gotchas}

Perhaps surprisingly, the aspect ratio modifier only changes the *proposal*. For example, in the view below, it'll propose a square size to the text. However, as we can see from the border, the aspect ratio directly reports its child's size, and it doesn't report a square size.

> Pretty-printed code from Aspect Text

```swift
Text("Hello, world")
    .aspectRatio(1, contentMode: .fit)
    .border(Color.accentColor)
```

> Interactive example on HTML page: Aspect Text.

To change the behavior above, we can use a [flexible frame](/layout/flexible-frames) to unconditionally accept the proposed size. Note that this doesn't change the size of the text itself, but it does cause the border to be drawn as a square. Also, the size of the border isn't related to the size of the text; it simply accepts the proposed size.

If we want a square border that wraps around the text exactly, we can use a [geometry reader](/layout/geometry-reader).