object-fit 속성

object-fit 속성은 이미지나 비디오와 같은 요소의 가로세로 비율 또는 크기 조정을 지정합니다.

구문

선택자 {
	object-fit: fill 또는 contain 또는 cover 또는 none;
}

다음 표는 object-fit 속성의 주요 값을 보여줍니다:

값	설명
`fill`	지정된 크기에 맞추기 위해 요소를 늘리거나 줄입니다. 요소의 비율은 무시됩니다.
`contain`	지정된 크기에 맞추기 위해 요소를 늘리거나 줄입니다. 요소의 비율은 유지됩니다.
`cover`	지정된 영역을 완전히 채우기 위해 요소 크기를 조정합니다. 요소 자체의 비율은 유지됩니다.
`none`	요소의 원본 크기를 유지합니다.

이미지에 비율을 유지하지 않고 지정된 크기를 채우도록 설정해 봅시다:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

이제 이미지가 비율을 유지하면서 지정된 컨테이너를 채우도록 만들어 봅시다:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

이미지가 자신의 비율은 유지하면서 크기는 조정되어 지정된 컨테이너를 완전히 채우도록 해 봅시다:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

이미지를 원본 크기 그대로 유지하면서 지정된 컨테이너 안에 배치해 봅시다:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}