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 install 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 Setting asChild to true has the same effect as setting as to template.
ratio	1	number The desired ratio. Eg: 16/9