AspectRatio

Display

Wrapper that maintains a fixed width/height ratio for its content.

Props

Prop	Type	Default	Description
`ratio`	`number`	`16/9`	Width/height ratio (e.g. 16/9 = 1.777, 1/1 = 1, 4/3 = 1.333).

Examples

16:9 video container

16 / 9

vue

<DsAspectRatio :ratio="16/9" class="w-full overflow-hidden rounded-ds-lg">
  <img src="/image.jpg" alt="..." class="w-full h-full object-cover" />
</DsAspectRatio>

Square (1:1)

1 / 1

vue

<DsAspectRatio :ratio="1" class="w-40 overflow-hidden rounded-full">
  <img src="/avatar.jpg" alt="Avatar" class="w-full h-full object-cover" />
</DsAspectRatio>

Accessibility

Purely structural component, no accessibility impact.

Tooltip

CopyButton