객체 맞춤

객체 맞춤 (Object Fit)

이미지나 비디오 같은 replaced 요소의 콘텐츠가 컨테이너에 어떻게 맞춰질지 정하는 유틸리티예요. CSS의 object-fit 속성을 조절해요.

출처: 문서

본문

클래스와 스타일

  • object-contain — object-fit: contain;
  • object-cover — object-fit: cover;
  • object-fill — object-fit: fill;
  • object-none — object-fit: none;
  • object-scale-down — object-fit: scale-down;

컨테이너 덮기

object-cover 유틸리티를 쓰면 요소의 콘텐츠가 컨테이너를 덮도록 크기를 조절해요.

<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />

컨테이너 안에 맞추기

object-contain 유틸리티를 쓰면 요소의 콘텐츠가 컨테이너 안에 들어가도록 크기를 조절해요.

<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />

늘려서 채우기

object-fill 유틸리티를 쓰면 요소의 콘텐츠를 컨테이너에 맞게 늘려요.

<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />

축소하기

object-scale-down 유틸리티를 쓰면 요소의 콘텐츠를 원본 크기로 표시하되, 필요할 때만 컨테이너에 맞게 축소해요.

<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />

원본 크기 사용하기

object-none 유틸리티를 쓰면 요소의 콘텐츠를 컨테이너 크기를 무시하고 원본 크기 그대로 표시해요.

<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />

반응형 디자인

object-fit 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<img class="object-contain md:object-cover" src="/img/mountains.jpg" />

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

더 알아보기 (Learn more)