tszhong0411/ui

Docs

Aspect Ratio

Displays content within a desired ratio.

Usage

import { AspectRatio } from '@tszhong0411/ui'
import Image from 'next/image'

import { AspectRatio } from '@tszhong0411/ui'
import Image from 'next/image'

<AspectRatio ratio={16 / 9}>
  <Image src='...' alt='...' className='rounded-md object-cover' />
</AspectRatio>

<AspectRatio ratio={16 / 9}>
  <Image src='...' alt='...' className='rounded-md object-cover' />
</AspectRatio>