Tailwind CSS로 구현하는 이미지 Object Fit
KUKJIN LEE • 3개월 전 작성
1. object-fit이란 무엇인가?
object-fit은 CSS 속성 중 하나로, 이미지나 비디오 같은 컨텐츠를 부모 요소 안에서 어떻게 크기를 조절하고 위치시킬지를 정의합니다. 주요 값으로는 fill, contain, cover, none, scale-down 등이 있습니다.
-
fill: 컨텐츠를 요소의 크기에 맞추어 늘리거나 줄입니다. -
contain: 컨텐츠의 비율을 유지하면서 요소 안에 맞춥니다. -
cover: 요소를 완전히 채우도록 컨텐츠를 늘리거나 줄입니다. -
none: 크기를 조절하지 않습니다. -
scale-down:none또는contain중 더 작은 값을 적용합니다.
개인적으로 fill, contain, cover 외 사용 경험이 적었습니다.
2. Tailwind CSS에서 object-fit 설정하기
Tailwind CSS는 유틸리티 클래스 기반의 프레임워크로, object-fit을 쉽게 설정할 수 있습니다.
<img class="object-fill" src="/path/to/image.jpg" alt="example image">
<img class="object-contain" src="/path/to/image.jpg" alt="example image">
<img class="object-cover" src="/path/to/image.jpg" alt="example image">
<img class="object-none" src="/path/to/image.jpg" alt="example image">
<img class="object-scale-down" src="/path/to/image.jpg" alt="example image">
3. 실전예제
<div class="bg-indigo-300 ...">
<img class="object-cover h-48 w-96 ...">
</div>위 코드와 이미지는 Tailwind 공식 문서에서 제공하는 코드와 이미지로 object-cover를 사용하면 요소를 완전 채우면서 비율을 유지합니다. 주로 배너 이미지에 사용됩니다.
다른 예시로 object-contain을 사용하게 된다면?
이미지의 비율을 유지하면서 요소 안에 맞추어 표시합니다.
4. 자주 발생하는 문제와 그 해결 방법
이미지를 추가하고 object를 활용해도 width, height에 따라서 요소를 벗어나거나 비율이 맞지 않는 경우가 발생하게 됩니다. 이런 경우 aspect-ratio를 활용해 문제를 해결할 수 있습니다.
