Aspect Ratio

Constrains media to a fixed ratio while it scales.

16 / 9

<AspectRatio
  ratio={16 / 9}
  className="flex items-center justify-center rounded-lg border border-separator bg-bg-elevated"
>
  <span className="font-mono text-xs text-text-tertiary">16 / 9</span>
</AspectRatio>

Ratios

3 / 4

1 / 1

Markdown for agents: /design/aspect-ratio.md · spec: /design.md