종횡비

종횡비 (Aspect Ratio)

종횡비 컴포넌트는 원하는 비율 안에서 콘텐츠를 표시할 수 있게 해주는 컴포넌트예요. 이미지나 비디오 같은 미디어를 특정 비율로 고정해서 레이아웃이 깨지지 않게 하고 싶을 때 유용하죠. 예를 들어 16:9 비율의 썸네일을 만들 때 아주 편리해요.

출처: 문서

본문

설치하기

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 종횡비 컴포넌트를 바로 추가할 수 있어요.

CLI Manual 
npx shadcn@latest add aspect-ratio

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-aspect-ratio

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

import Image from "next/image"

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

ratio prop에 원하는 비율을 숫자로 넘겨 주세요. 아래 예시는 16 / 9 비율 안에서 이미지를 자르는 모습이에요.

<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <Image src="..." alt="Image" className="rounded-md object-cover" />
  </AspectRatio>
</div>

더 알아보기 (Learn more)