AspectRatio

AspectRatio

일관된 가로/세로 비율을 유지하는 컴포넌트예요. 이미지, 지도, 비디오 등 미디어를 표시할 때 사용해요.

출처: 문서

본문

Usage

AspectRatio는 일관된 너비/높이 비율을 유지해요. 이미지, 지도, 비디오 등 미디어를 표시하는 데 사용할 수 있어요.

import { AspectRatio } from '@mantine/core';

function Demo() {
  return (
    <AspectRatio ratio={16 / 9} maw={300} mx="auto">
      <img src="https://placehold.co/1600x900" alt="Placeholder" />
    </AspectRatio>
  );
}

Map embed

AspectRatio로 지도 임베드를 비율을 유지하며 표시할 수 있어요.

import { AspectRatio } from '@mantine/core';

function Demo() {
  return (
    <AspectRatio ratio={16 / 9}>
      <iframe src="https://www.openstreetmap.org/export/embed.html?" title="OpenStreetMap" />
    </AspectRatio>
  );
}

Video embed

AspectRatio로 비디오 임베드를 비율을 유지하며 표시할 수 있어요.

import { AspectRatio } from '@mantine/core';

function Demo() {
  return (
    <AspectRatio ratio={16 / 9}>
      <iframe src="https://www.youtube.com/embed/WZwr2a_l2uQ" title="YouTube video" />
    </AspectRatio>
  );
}

Inside flex container

기본적으로 AspectRatio는 고정 너비와 높이를 가지지 않아서 일반 컨테이너에서는 가능한 한 많은 공간을 차지해요. 하지만 flex 컨테이너 안에서는 사용 가능한 공간을 채우도록 늘어나지 않아요. flexbox 컨테이너 안에서 동작하게 하려면 width나 flex 속성을 설정해야 해요.

import { AspectRatio, Image } from '@mantine/core';

function Demo() {
  return (
    <Flex>
      <AspectRatio ratio={16 / 9} style={{ flex: 1 }}>
        <Image src="https://placehold.co/1600x900" alt="Placeholder" />
      </AspectRatio>
    </Flex>
  );
}

더 알아보기 (Learn more)

• AppShell
• Center