Object fit
Object fit (객체 맞춤)
<img>나 <video> 같은 대체 요소(replaced element)의 내용이 컨테이너에 어떻게 맞춰지도록 크기를 조절할지 설정하는 object fit 유틸리티에 대해 알아봅니다.
출처: 문서
본문
작동 방식 (How it works)
반응형 object-fit 유틸리티 클래스로 object-fit 프로퍼티의 값을 변경할 수 있습니다. 이 프로퍼티는 내용이 부모 컨테이너를 다양한 방식으로 채우도록 하는데, 예를 들어 가로세로 비율을 유지하거나 가능한 한 많은 공간을 차지하도록 늘리는 방식입니다.
object-fit 값에 해당하는 클래스는 .object-fit-{value} 형식으로 이름 지어집니다. 다음 값 중에서 선택할 수 있습니다.
- contain
- cover
- fill
- scale (scale-down용)
- none
예시 (Examples)
대체 요소에 object-fit-{value} 클래스를 추가하세요.
<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="...">
반응형 (Responsive)
각 object-fit 값에 반응형 변형도 존재하며, .object-fit-{breakpoint}-{value} 형식을 사용합니다. 브레이크포인트 약어는 sm, md, lg, xl, xxl입니다. 클래스는 필요에 따라 조합해 다양한 효과를 낼 수 있습니다.
<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="...">
비디오 (Video)
.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 utilities API
object fit 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.
scss/_utilities.scss
"object-fit": (
responsive: true,
property: object-fit,
values: (
contain: contain,
cover: cover,
fill: fill,
scale: scale-down,
none: none,
)
),