aspect-ratio

aspect-ratio (가로세로 비율)

요소의 가로세로 비율(aspect ratio)을 한 번에 지정해 주는 유틸리티예요. 이미지나 비디오 같은 요소를 원하는 비율로 고정할 때 정말 편리해요.

출처: 문서

본문

ClassStyles

Examples

Basic example

aspect-3/2 같은 aspect-<ratio> 유틸리티를 사용하면 요소에 특정 가로세로 비율을 줄 수 있어요.

예시를 리사이즈해 보면 기대한 동작을 확인할 수 있어요.

<img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />

Using a video aspect ratio

aspect-video 유틸리티를 사용하면 비디오 요소에 16 / 9 비율을 줄 수 있어요.

예시를 리사이즈해 보면 기대한 동작을 확인할 수 있어요.

<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Using a custom value

완전히 커스텀한 값으로 가로세로 비율을 지정하고 싶다면 aspect-[<value>] 문법을 사용해요.

<img class="aspect-[calc(4*3+1)/3] ..." src="/img/villas.jpg" />

CSS 변수로 지정하고 싶다면 aspect-(<custom-property>) 문법도 사용할 수 있어요.

<img class="aspect-(--my-aspect-ratio) ..." src="/img/villas.jpg" />

이것은 aspect-[var(<custom-property>)]의 단축 표기로, var() 함수를 자동으로 넣어 주는 문법이에요.

Responsive design

aspect-ratio 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<iframe class="aspect-video md:aspect-square ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.

Customizing your theme

--aspect-* 테마 변수를 사용하면 프로젝트에서 가로세로 비율 유틸리티를 커스터마이즈할 수 있어요.

@theme {
  --aspect-retro: 4 / 3;
}

이제 마크업에서 aspect-retro 유틸리티를 사용할 수 있어요.

<iframe class="aspect-retro" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

테마를 커스터마이즈하는 방법에 대해 더 자세히 알고 싶다면 theme 문서를 참고해 주세요.

더 알아보기 (Learn more)