# AspectRatio

A box that locks its height to a fraction of its width, for the image, video frame or chart that must not squash.

```slint
import { AspectRatio } from "@glint/components/aspect-ratio.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;

                AspectRatio {
                    ratio: 16.0 / 9.0;

                    Rectangle {
                        background: Tokens.color-muted;
                        border-radius: Tokens.radius-lg;
                        border-width: 1px;
                        border-color: Tokens.color-border-hairline;

                        Text {
                            text: "16:9 Landscape Frame";
                            color: Tokens.color-muted-foreground;
                            font-size: Tokens.typography-body-sm-size;
                            font-weight: Tokens.typography-weight-medium;
                        }
                    }
                }
            }
        }
    }
}
```

## Usage

```slint
import { AspectRatio } from "@glint/components/aspect-ratio.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component AppWindow inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        AspectRatio {
            ratio: 4.0 / 3.0;

            Rectangle {
                background: Tokens.color-surface-2;
                border-radius: Tokens.radius-md;
            }
        }
    }
}
```

`AspectRatio` locks the height of its container relative to its allocated width, satisfying mathematical ratios such as 16/9, 4/3, or 1/1 square formats.

## Examples

### Common aspect ratios

AspectRatio accommodates standard widescreen (16:9), photo (4:3), and avatar (1:1) proportions.

```slint
import { AspectRatio } from "@glint/components/aspect-ratio.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 16px;

            VerticalLayout {
                width: 180px;

                AspectRatio {
                    ratio: 1.0;

                    Rectangle {
                        background: Tokens.color-muted;
                        border-radius: Tokens.radius-md;
                        border-width: 1px;
                        border-color: Tokens.color-border-hairline;

                        Text {
                            text: "1:1 Square";
                            color: Tokens.color-muted-foreground;
                            font-size: Tokens.typography-body-sm-size;
                        }
                    }
                }
            }

            VerticalLayout {
                width: 240px;

                AspectRatio {
                    ratio: 16.0 / 9.0;

                    Rectangle {
                        background: Tokens.color-muted;
                        border-radius: Tokens.radius-md;
                        border-width: 1px;
                        border-color: Tokens.color-border-hairline;

                        Text {
                            text: "16:9 Video";
                            color: Tokens.color-muted-foreground;
                            font-size: Tokens.typography-body-sm-size;
                        }
                    }
                }
            }
        }
    }
}
```

## API Reference

### Properties

| Property | Type       | Default | Description                                                       |
| -------- | ---------- | ------- | ----------------------------------------------------------------- |
| `ratio`  | `in float` | `1.0`   | Width-to-height ratio (e.g. 16/9 = 1.778, 1/1 = 1.0, 3/4 = 0.75). |

## Accessibility

- **It adds nothing to the tree, and takes nothing away.** `AspectRatio` declares no `accessible-role`, no label and no focus behaviour — it only sets a height against a width. Whatever you put in the slot is announced exactly as it would be anywhere else; there is no delegation happening, because there is nothing here to delegate.
- **The name belongs to the content.** An image inside it is named by the image, a video surface by the control that plays it. If the box itself is what a reader needs to find, that is a `region` named at the call site, the way [ScrollArea](/docs/components/scroll-area#naming-a-scrolling-surface) documents — not something `AspectRatio` can guess.