Aspect ratiostandard

가로세로 비율을 고정한 상자(aspect ratio)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 CSS `aspect-ratio` 로 그립니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/aspect-ratio

Default

16:9

21:9

1:1

9:16

aspect-ratio-example.tsx

import Image from "next/image"
import {  Example,  ExampleWrapper,} from "@/components/example"import { AspectRatio } from "@/components/ui/aspect-ratio"
export default function AspectRatioExample() {  return (    <ExampleWrapper className="max-w-4xl 2xl:max-w-4xl">      <AspectRatio16x9 />      <AspectRatio21x9 />      <AspectRatio1x1 />      <AspectRatio9x16 />    </ExampleWrapper>  )}
function AspectRatio16x9() {  return (    <Example title="16:9" className="items-center justify-center">      <AspectRatio        ratio={16 / 9}        className="rounded-lg bg-muted style-luma:rounded-3xl"      >        <Image          src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23475569'/%3E%3C/svg%3E"          alt="Photo"          fill          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"        />      </AspectRatio>    </Example>  )}
function AspectRatio1x1() {  return (    <Example title="1:1" className="items-start">      <AspectRatio        ratio={1 / 1}        className="rounded-lg bg-muted style-luma:rounded-3xl"      >        <Image          src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23475569'/%3E%3C/svg%3E"          alt="Photo"          fill          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"        />      </AspectRatio>    </Example>  )}
function AspectRatio9x16() {  return (    <Example title="9:16" className="items-center justify-center">      <AspectRatio        ratio={9 / 16}        className="rounded-lg bg-muted style-luma:rounded-3xl"      >        <Image          src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23475569'/%3E%3C/svg%3E"          alt="Photo"          fill          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"        />      </AspectRatio>    </Example>  )}
function AspectRatio21x9() {  return (    <Example title="21:9" className="items-center justify-center">      <AspectRatio        ratio={21 / 9}        className="rounded-lg bg-muted style-luma:rounded-3xl"      >        <Image          src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23475569'/%3E%3C/svg%3E"          alt="Photo"          fill          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"        />      </AspectRatio>    </Example>  )}