Aspect Ratio

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/primitives-aspect-ratio

Code

import { AspectRatio } from '@/components/ui/aspect-ratio'

Code

<AspectRatio ratio={16 / 9}>
  <imgalt="Image" className="h-full w-full object-cover" />
</AspectRatio>

Prop	Type	Default	Description
`ratio`	number	-	The desired aspect ratio (e.g. `16 / 9`, `1`)
`className`	string	-	Custom class name applied to the container
`...props`	ComponentProps<'div'>	-	All native HTML div attributes

4:3 standard aspect ratio

1:1 square aspect ratio

21:9 ultrawide aspect ratio

9:16 portrait aspect ratio

3:2 classic photography aspect ratio

16:10 computer monitor aspect ratio