Aspect Ratio | Cortexcn

Installation

pnpm dlx shadcn@latest add @cortexcn/aspect-ratio

pnpm dlx shadcn@latest add @cortexcn/aspect-ratio

Usage

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

Examples

16:9

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

export function AspectRatio16x9() {
  return (
    <div className="flex flex-col gap-6 items-center justify-center">
      <AspectRatio
        ratio={16 / 9}
        className="rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"
      >
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"
        />
      </AspectRatio>
    </div>
  )
}

import Image from "next/image"import { AspectRatio } from "@/components/aspect-ratio"export function AspectRatio16x9() {  return (    <div className="flex flex-col gap-6 items-center justify-center">      <AspectRatio        ratio={16 / 9}        className="rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"      >        <Image          src="https://avatar.vercel.sh/shadcn1"          alt="Photo"          fill          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"        />      </AspectRatio>    </div>  )}

21:9

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

export function AspectRatio21x9() {
  return (
    <div className="flex flex-col gap-6 items-center justify-center">
      <AspectRatio
        ratio={21 / 9}
        className="rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"
      >
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"
        />
      </AspectRatio>
    </div>
  )
}

import Image from "next/image"import { AspectRatio } from "@/components/aspect-ratio"export function AspectRatio21x9() {  return (    <div className="flex flex-col gap-6 items-center justify-center">      <AspectRatio        ratio={21 / 9}        className="rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"      >        <Image          src="https://avatar.vercel.sh/shadcn1"          alt="Photo"          fill          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"        />      </AspectRatio>    </div>  )}

1:1

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

export function AspectRatio1x1() {
  return (
    <div className="flex flex-col gap-6 items-start">
      <AspectRatio
        ratio={1 / 1}
        className="rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"
      >
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"
        />
      </AspectRatio>
    </div>
  )
}

import Image from "next/image"import { AspectRatio } from "@/components/aspect-ratio"export function AspectRatio1x1() {  return (    <div className="flex flex-col gap-6 items-start">      <AspectRatio        ratio={1 / 1}        className="rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"      >        <Image          src="https://avatar.vercel.sh/shadcn1"          alt="Photo"          fill          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"        />      </AspectRatio>    </div>  )}

9:16

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

export function AspectRatio9x16() {
  return (
    <div className="flex flex-col gap-6 items-center justify-center">
      <AspectRatio
        ratio={9 / 16}
        className="rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"
      >
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"
        />
      </AspectRatio>
    </div>
  )
}

import Image from "next/image"import { AspectRatio } from "@/components/aspect-ratio"export function AspectRatio9x16() {  return (    <div className="flex flex-col gap-6 items-center justify-center">      <AspectRatio        ratio={9 / 16}        className="rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"      >        <Image          src="https://avatar.vercel.sh/shadcn1"          alt="Photo"          fill          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none"        />      </AspectRatio>    </div>  )}

Adapted from the shadcn/ui Aspect Ratio (MIT).