Aspect Ratio

Ready

Part of Layout collection

Common Aspect Ratios

Maintain consistent aspect ratios for images and videos

16:9 (Widescreen)

16:9

Widescreen

4:3 (Standard)

4:3

Standard

1:1 (Square)

1:1

Square

21:9 (Ultrawide)

21:9

Ultrawide

Image Container

Use with images to prevent layout shift

Image Placeholder

16:9 Aspect Ratio

Video Embed

Perfect for responsive video embeds

Video Player

Features

  • Maintain aspect ratio across different screen sizes
  • Prevent layout shift when loading images/videos
  • Support for any custom ratio (e.g., 16/9, 4/3, 1/1)
  • Perfect for responsive media embeds
  • Works with images, videos, and custom content

Usage

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

// 16:9 Widescreen
<AspectRatio ratio={16 / 9}>
  <Image
    src="/image.jpg"
    alt="Image"
    fill
    className="object-cover"
  />
</AspectRatio>

// 4:3 Standard
<AspectRatio ratio={4 / 3}>
  <Image src="/image.jpg" alt="Image" fill />
</AspectRatio>

// 1:1 Square
<AspectRatio ratio={1}>
  <div className="bg-gradient-to-br from-pink-500 to-purple-600">
    Custom Content
  </div>
</AspectRatio>

// Custom ratio
<AspectRatio ratio={21 / 9}>
  <iframe src="..." />
</AspectRatio>