ReUI Aspect Ratio

Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.

by Sean Hello

16:10 computer monitor aspect ratio preview

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

export default function Pattern() {
  return (
    <div className="w-full max-w-md">
      <AspectRatio
        ratio={16 / 10}
        className="bg-muted rounded-xl overflow-hidden border"
      >
        <img
          src="https://picsum.photos/1000/800?grayscale&random=8"
          alt="16:10"
          width={1000}
          height={800}
          className="h-full w-full object-cover"
        />
      </AspectRatio>
    </div>
  )
}