◇

AspectRatio

1 parts

Displays content within a fixed, responsive width-to-height ratio. The element grows to fill its container's width and derives its height from the ratio, so the box keeps its proportions at any size. Use it to reserve layout space for images, video, maps, or embeds and avoid content shift.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  AspectRatio,
} from '@robonen/primitives/display/aspect-ratio';

<AspectRatio />

API Reference

AspectRatio

Root

Displays content within a fixed, responsive width-to-height ratio. The element grows to fill its container's width and derives its height from the `ratio`, so the box keeps its proportions at any size. Use it to reserve layout space for images, video, maps, or embeds and avoid content shift.

Prop	Type	Default	Description
`ratio`?	`number`	`1`	Desired width-to-height ratio (e.g. `16 / 9`, `1`, `4 / 3`).