Aspect Ratio
Display content at a specific aspect ratio.
tsx
'use client'
import { AspectRatio } from '@nerdfish/ui'
import Image from 'next/image'
export function AspectRatioExample() {
return (
<div className="w-[450px]">
<AspectRatio ratio={16 / 9}>
<Image
src="https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80"
alt="Photo by Alvaro Pinot"
fill
className="rounded-container object-cover"
/>
</AspectRatio>
</div>
)
}
Usage
tsx
import { AspectRatio } from '@nerdfish/ui'
import Image from 'next/image'
tsx
<div className="w-[450px]">
<AspectRatio ratio={16 / 9}>
<Image
src="https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80"
alt="Photo by Alvaro Pinot"
fill
className="rounded-container object-cover"
/>
</AspectRatio>
</div>