Aspect Ratio

An image element with a fallback for representing the user.

'use client'
import { AspectRatio } from '@nerdfish/react/aspect-ratio'

export default function AspectRatioExample() {
	return (
		<AspectRatio
			ratio={16 / 9}
			className="bg-background-muted rounded-base w-125 max-w-[calc(100vw-3rem)]"
		>
			<img
				src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
				alt="Photo by Drew Beamer"
				className="rounded-base h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
			/>
		</AspectRatio>
	)
}