Aspect Ratio

Displays content within a desired ratio.

<script setup lang="ts">
import { AspectRatio } from 'radix-vue'
</script>

<template>
  <div class="shadow-blackA7 w-full sm:w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
    <AspectRatio :ratio="16 / 9">
      <img
        class="h-full w-full object-cover"
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
        alt="Landscape photograph by Tobias Tullius"
      >
    </AspectRatio>
  </div>
</template>

Features

• Accepts any custom ratio.

Installation

Install the component from your command line.

$ npm add radix-vue

Anatomy

Import the component.

<script setup>
import { AspectRatio } from 'radix-vue'
</script>

<template>
  <AspectRatio />
</template>

API Reference

Root

Contains the content you want to constrain to a given ratio.

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

Slots (default)	Payload
aspect	number Current aspect ratio (in %)