Aspect Ratio

Docs

Aspect Ratio

Displays content within a desired ratio.

This component uses Radix UI

import Image from 'next/image'
 
import { AspectRatio } from 'ui'
 
export function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted">
      <Image
        src="https://images.unsplash.com/photo-1560937526-61078e7eb7d8?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Photo by Drew Beamer"
        fill
        className="rounded-md object-cover"
      />
    </AspectRatio>
  )
}

Installation

npx shadcn-ui@latest add aspect-ratio

Usage

import Image from 'next/image'
 
import { AspectRatio } from '@/components/ui/aspect-ratio'

<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <Image src="..." alt="Image" className="rounded-md object-cover" />
  </AspectRatio>
</div>

PreviousAlert Dialog

NextAvatar