Preview

Installation

npx sigma-ui@latest add aspect-ratio

Usage

<script setup lang="ts">
import { AspectRatio } from '@/components/ui/aspect-ratio';
</script>

<template>
  <AspectRatio :ratio="16 / 9">
    <img
      src="/photo.jpg"
      alt="Cover"
    >
  </AspectRatio>
</template>

ratio is width divided by height. 16 / 9 is a widescreen frame, and 1 is a square. The image or other content should fill the box.

Examples

16:9

API Reference

AspectRatio

Props

Prop	Type	Default
ratio The desired ratio. Eg: 16/9	number	1
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Content that fills the ratio box. Receives the current ratio as a percentage.	{ aspect: number; }

Accessibility

The component only constrains layout. Give images an alt, and use an empty alt when the image is decorative.

Key	Description
Tab	Moves focus to an interactive element inside the frame.