객체 차우기

// Object fit

개체 맞춤 유틸리티를 사용하여 <img> 또는 <video>와 같은 대체된 요소의 콘텐츠가 컨테이너에 맞게 크기를 조정하는 방법을 수정할 수 있습니다.

작동 방식

반응형 object-fit 유틸리티 클래스로 object-fit 속성의 값을 변경하세요. 이 속성은 가로 세로 비율을 유지하거나 가능한 한 많은 공간을 차지하도록 늘리는 등 다양한 방식으로 콘텐츠가 부모 컨테이너를 채우도록 지시합니다.

object-fit 값에 대한 클래스는 .object-fit-{value} 형식을 사용하여 이름이 지정됩니다. 다음 값 중에서 선택합니다:

contain
cover
fill
scale (scale 축소)
none

예제

대체된 요소에 object-fit-{value} 클래스를 추가합니다:

html

<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">

반응형

각 객체 맞춤 값에 대해 .object-fit-{breakpoint}-{value} 형식을 사용하는 반응형 변형도 존재하며, 중단점 약어는 SM, MD, LG, XL, XXL이 있습니다. 필요에 따라 다양한 효과를 위해 클래스를 조합할 수 있습니다.

html

<img src="..." class="object-fit-sm-contain border rounded" alt="...">
<img src="..." class="object-fit-md-contain border rounded" alt="...">
<img src="..." class="object-fit-lg-contain border rounded" alt="...">
<img src="..." class="object-fit-xl-contain border rounded" alt="...">
<img src="..." class="object-fit-xxl-contain border rounded" alt="...">

동영상

.object-fit-{value} 및 반응형 .object-fit-{breakpoint}-{value} 유틸리티는 <video> 요소에서도 작동합니다.

<video src="..." class="object-fit-contain" autoplay></video>
<video src="..." class="object-fit-cover" autoplay></video>
<video src="..." class="object-fit-fill" autoplay></video>
<video src="..." class="object-fit-scale" autoplay></video>
<video src="..." class="object-fit-none" autoplay></video>

CSS

Sass 유틸리티 API

객체 맞춤 유틸리티는 유틸리티 API의 scss/_utilities.scss에 선언되어 있습니다. 유틸리티 API 사용 방법에 대해 알아보세요.

scss/_utilities.scss

"object-fit": (
  responsive: true,
  property: object-fit,
  values: (
    contain: contain,
    cover: cover,
    fill: fill,
    scale: scale-down,
    none: none,
  )
),