화면비

import Image from "next/image"

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

Aspect ratio는 자식 요소를 16:9, 정사각형, 세로형처럼 고정된 가로세로 비율에 묶어 둡니다. 덕분에 미디어가 페이지를 다시 흐트러뜨리지 않고 컨테이너에 맞춰 크기를 조절합니다. 이 변형은 CSS aspect-ratio 속성을 감싼 의존성 없는 래퍼이며(Base UI에는 aspect ratio 프리미티브가 없습니다), 의도적으로 스타일을 입히지 않았습니다. 네오브루탈리즘 테두리와 그림자는 이 컴포넌트를 담는 카드에서 나옵니다.

다음과 같은 경우에 사용합니다.

• 이미지 그리드와 썸네일 — 크기가 뒤죽박죽인 원본을 균일한 카드로 정돈합니다.
• 동영상과 지도 임베드 — 16:9 자리를 미리 확보해 iframe이 로드되는 동안 레이아웃이 밀리지 않게 합니다.
• 반응형 히어로 미디어 — 높이를 하드코딩하지 않고 컬럼 너비에 맞춰 이미지 크기를 조절합니다.

설치#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
npx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
복사

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
복사

"use client"

import { AspectRatio as AspectRatioPrimitive } from "radix-ui"

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

export { AspectRatio }

사용법#

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

복사<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

예제#

정사각형#

ratio={1 / 1} prop을 사용한 정사각형 종횡비 컴포넌트입니다. 이미지를 정사각형 형식으로 표시할 때 유용합니다.

import Image from "next/image"

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

세로형#

ratio={9 / 16} prop을 사용한 세로형 종횡비 컴포넌트입니다. 이미지를 세로 형식으로 표시할 때 유용합니다.

import Image from "next/image"

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

RTL#

Neobrutalism에서 RTL을 활성화하는 방법은 RTL 설정 가이드를 참조하세요.

"use client"

import * as React from "react"

접근성#

AspectRatio는 평범한 div를 렌더링합니다. 순전히 표현용이라 role이나 ARIA 속성은 전혀 관여하지 않습니다. 접근성은 그 안에 담기는 콘텐츠에 달려 있습니다. 이미지에는 의미 있는 alt 텍스트를 지정하고(장식용이라면 alt=""), 임베드한 iframe에는 title을 붙이세요. 보통 object-cover로 이미지를 잘라내는 방식을 쓰므로, 잘려 나가는 가장자리에 정보가 담긴 이미지는 피하세요.

API 참조#

AspectRatio#

AspectRatio 컴포넌트는 원하는 비율로 콘텐츠를 표시합니다.

자세한 내용은 Base UI 문서를 참조하세요.