Tailwind CSS로 구현하는 이미지 Object Fit

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. 실전예제