object-fit과 그 대체 방법

2020-06-28

컨테이너와 다른 비율의 이미지를 위아래나 좌우를 크롭하고 꽉채워야 하는 상황을 많이들 봤을 것이다. 아마도 대부분 background-size: cover로 이미지를 넣으면서 img 요소를 써야 하는 상황에서 배경이미지를 사용하는 것이 맞는 것인지 또한 고민해 봤을 것이다. 이런 상황을 아주 깔끔하게 해결할 수 있는 방법이 바로 object-fit이다.

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

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

우선 이미지와 컨테이너 비율에 따라서 CSS classvertical이나 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%;
}

전체 코드는 예제 페이지에서 확인할 수 있다. IE에서도 잘 나온다.

Comments

  • 신현석 2020-07-01

    vertical과 horizontal을 반대로 써서 수정했습니다.

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.