Aspect Ratio

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-vue/aspect-ratio
Copy

Usage#

Copy<script setup lang="ts">
import { AspectRatio } from "@/components/ui/aspect-ratio"
</script>
 
<template>
  <AspectRatio :ratio="16 / 9">
    <img src="..." alt="Image" class="rounded-md object-cover" />
  </AspectRatio>
</template>

Examples#

Square#

A square aspect ratio component using the :ratio="1 / 1" prop. This is useful for displaying images in a square format.

Portrait#

A portrait aspect ratio component using the :ratio="9 / 16" prop. This is useful for displaying images in a portrait format.

API Reference#

AspectRatio#

The AspectRatio component displays content within a desired ratio.