Components / Layout

AspectRatio

A CSS aspect-ratio wrapper for media and previews.

Preview

Case study

Designing calmer project handoffs

A 16:9 media card that stays stable at every width.

Use cases

Media gallery

Keep image tiles the same shape while assets load.

Video preview

Preserve a widescreen preview inside a flexible card.

Usage example

Vue

<AspectRatio :ratio="4 / 3">
  <img src="/preview.jpg" alt="Project preview" />
</AspectRatio>

More examples

Gallery thumbnail

The wrapper sets shape while the image fills it.

Gallery thumbnail

<script setup lang="ts">
import AspectRatio from './components/ui/aspect-ratio/AspectRatio.vue'
</script>

<template>
  <AspectRatio :ratio="4 / 3" as="figure">
    <img src="/gallery/mountains.jpg" alt="Mountain landscape" class="h-full w-full object-cover" />
  </AspectRatio>
</template>

Widescreen preview

A string ratio can represent a familiar format.

Widescreen preview

<script setup lang="ts">
import AspectRatio from './components/ui/aspect-ratio/AspectRatio.vue'
</script>

<template>
  <AspectRatio ratio="16 / 9"><video controls src="/demo.mp4" class="h-full w-full" /></AspectRatio>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for AspectRatio
Name	Type	Default or requirement
`ratio`	number \| string	16 / 9
`as`	div \| figure	div

Give images meaningful alternative text when they convey information.

Implementation notes

Set object-fit on images or video to choose cropping behavior inside the frame.
The ratio controls layout, not the intrinsic dimensions of the media.

Accessibility and localization

Give informative images alt text and caption media when the content requires it.