Aspect Ratio

Display content at a specific aspect ratio.

Photo by Alvaro Pinot
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>