종횡비

종횡비 (Aspect Ratio)

비디오, 이미지, 지도 등을 삽입할 때 일관된 종횡비(가로세로 비율)를 유지하는 데 사용하는 컴포넌트예요. 콘텐츠의 원래 비율을 덮어써서 원하는 비율로 고정할 수 있어요.

출처: 문서

본문

사용법 (Usage)

ratio prop은 AspectRatio의 자식 콘텐츠 원래 종횡비를 덮어써요. 숫자 값만 허용하며, 문자열은 받지 않아요.

import { AspectRatio } from "@chakra-ui/react"

<AspectRatio ratio={16 / 9}>
  <iframe
    title="naruto"
    src="https://www.youtube.com/embed/QhBnZ6NPOY0"
    allowFullScreen
  />
</AspectRatio>

예제 (Examples)

이미지 (Image)

4 대 3 종횡비를 가진 이미지를 삽입하는 방법이에요.

<Box aspectRatio="square" />