AspectRatio

자식 요소의 가로, 세로 비율 aspect-ratio 을 편리하게 맞춰 줄 수 있는 컴포넌트입니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface AspectRatioProps extends ComponentProps<'div'> {
  ratio: number;
}

const AspectRatio: React.ForwardRefExoticComponent<
  Omit<PropsWithChildren<AspectRatioProps>, 'ref'> &
    React.RefAttributes<HTMLDivElement>
>;

Usage

typescript

import { AspectRatio } from '@modern-kit/react'

const Example = () => {
  return (
    <div style={{ width: '500px' }}>
      <AspectRatio ratio={427 / 640}>
        <img src="https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9" />
      </AspectRatio>
    </div>
  );
};

Example