Aspect Ratio

고정된 비율로 콘텐츠를 표시하는 컴포넌트

16:9 Ratio

가장 일반적인 비디오 비율입니다.

16:9

tsx

<AspectRatio ratio={16 / 9}>
  <img
    src="https://example.com/image.jpg"
    alt="Photo"
    className="h-full w-full object-cover rounded-md"
  />
</AspectRatio>

4:3 Ratio

전통적인 TV 및 사진 비율입니다.

4:3

tsx

<AspectRatio ratio={4 / 3}>
  <div className="flex h-full w-full items-center justify-center rounded-md bg-muted">
    4:3 Content
  </div>
</AspectRatio>

1:1 (Square)

정사각형 비율로 프로필 이미지나 썸네일에 적합합니다.

1:1

tsx

<AspectRatio ratio={1}>
  <img
    src="https://example.com/avatar.jpg"
    alt="Avatar"
    className="h-full w-full object-cover rounded-md"
  />
</AspectRatio>

Usage

tsx

import { AspectRatio } from '@gpters-internal/ui';

function Example() {
  return (
    <div className="w-[450px]">
      <AspectRatio ratio={16 / 9}>
        <img
          src="..."
          alt="Image"
          className="h-full w-full object-cover rounded-md"
        />
      </AspectRatio>
    </div>
  );
}