object-fit

예제

컨테이너를 덮도록 크기 조정하기

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" />

반응형 디자인

접두사 an object-fit 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

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

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.