Aspect Ratio
Displays content within a desired ratio.
vue
<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.
sh
$ npm add radix-vue
Anatomy
Import the component.
vue
<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 | 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 %) |