Tailwind CSS: Aspect Ratio 유틸리티 사용 가이드

Aspect Ratio 유틸리티 기본 개념

Aspect Ratio 유틸리티는 특정 비율을 유지하면서 요소의 크기를 조정할 수 있도록 합니다. 이는 주로 이미지, 비디오, 또는 기타 임베드된 콘텐츠에서 유용하게 사용됩니다.

 

기본 Aspect Ratio 클래스

Tailwind CSS는 다양한 기본 비율 클래스를 제공합니다. 예를 들어, 16:9 비율을 적용하려면 aspect-w-16과 aspect-h-9 클래스를 사용하면 됩니다.

 

<div class="aspect-w-16 aspect-h-9">
  <img src="path/to/your/image.jpg" alt="Sample Image" class="object-cover">
</div>

 

다른 Aspect Ratio 예시

최근에는 16:9를 넘어서, 21:9를 원하는 분들도 있기 때문에, 적어봤습니다.

• 1:1 비율 (정사각형)

<div class="aspect-w-1 aspect-h-1 bg-gray-200">
  <img src="path/to/your/image.jpg" alt="Sample Image" class="object-cover">
</div>

 

• 21:9 비율

<div class="aspect-w-21 aspect-h-9 bg-gray-200">
  <img src="path/to/your/image.jpg" alt="Sample Image" class="object-cover">
</div>

 

Tailwind CSS의 Aspect Ratio 유틸리티를 사용하면 다양한 콘텐츠의 비율을 쉽게 유지하면서 크기를 조정할 수 있습니다.