ComponentsAspect Ratio

Aspect Ratio

Displays content within a desired ratio.


Photo by Donny Jiang
import { AspectRatio } from '@immit/ui/aspect-ratio'
import Image from 'next/image'
 
import demoImage from '../../../public/donny-jiang-unsplash.jpg'
 
export function AspectRatioDemo() {
  return (
    <AspectRatio ratio={1 / 1}>
      <Image
        fill
        src={demoImage}
        alt="Photo by Donny Jiang"
        className="rounded-md object-cover"
        placeholder="blur"
      />
    </AspectRatio>
  )
}