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 유틸리티를 사용하면 다양한 콘텐츠의 비율을 쉽게 유지하면서 크기를 조정할 수 있습니다.