비율의 다른 이미지를 적당히 확대해서 꽉 채워야 하는 경우를 많이 겪어 봤을 것이다. 보통 이미지를 배경으로 넣고 background-size: cover를 적용하면서 img 요소를 쓰는게 더 좋을 것 같은데 배경 이미지를 써도 되는지 고민해 봤을 것이다. 이런 고민을 아주 깔끔하게 해결할 수 있는 방법이 바로 object-fit이다.

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

object-fit을 적용하기 위해서는 우선 이미지의 너비와 높이를 100%로 설정해서 컨테이너 요소 안을 꽉 채워야 한다. 이상태에서는 비율이 맞지 않아 이미지가 찌그러져 보인다. 이 이미지에 object-fit: cover를 설정해 주면 background-size: cover와 동일한 효과를 볼 수 있다. img 요소 뿐만 아니라 video 요소에도 적용이 가능하고 cover 외에도 contain이나 fill 등도 적용이 가능하다. 보다 자세한 스펙은 MDN의 object-fit 페이지에서 확인할 수 있다.

• 
• 

아쉽게도 IE에서는 지원되지 않아서 다른 방법을 사용해야 한다. 사실 기존에도 이미지와 컨테이너의 비율이 정해져 있다면 object-fit과 비슷한 동작을 구현하는 일은 비교적 수월했다. 만약 이미지와 컨테이너의 가로세로 비율이 매번 다르다면 이 부분을 자바스크립트로 제어해서 IE에서도 비슷한 동작을 구현할 수 있다.

우선 이미지와 컨테이너 비율에 따라서 CSS class를 vertical이나 horizontal로 지정해주는 스크립트를 이미지의 onload에 적용해 준다. 이미지의 크기는 onload 보다 이전에 알 수 있기 때문에 타이밍을 앞당기는 것도 가능하다.

<script>
function setDirection(element) {
	if (element.naturalWidth / element.naturalHeight / element.parentNode.offsetWidth * element.parentNode.offsetHeight > 1) {
		element.classList.add('horizontal');
	} else {
		element.classList.add('vertical');
	}
}
</script>
<img src="IMG_1669.jpg" onload="setDirection(this)" alt="...">

이미지는 가운데 정렬하기 위해서 절대위치 50%를 적용하고 가로인지 세로인지에 따라서 어느쪽을 기준으로 삼을지를 선언한다. 넘치는 부분은 overflow: hidden으로 적당한 요소에서 잘라준다.

img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
img.vertical {
	width: 100%;
}
img.horizontal {
	height: 100%;
}

• 
•