AspectRatio

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

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

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.

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 documents — not something AspectRatio can guess.