CSS의 object-fit 속성은 요소가 자신을 감싸고 있는 컨테이너의 가로·세로 크기 안에서 어떻게 배치될지를 결정합니다. 개발자가 가장 자주 접하는 사례는 바로 배경 이미지나 <img> 태그로 삽입한 이미지입니다.
object-fit의 5가지 값
object-fit 속성에는 다섯 가지 값을 사용할 수 있습니다. 이해를 돕기 위해 이미지를 예시로 하나씩 살펴보겠습니다.
1. object-fit: contain
contain은 컨테이너에 들어가는 요소(여기서는 이미지)의 원본 비율(aspect ratio)을 유지합니다. 비율이 맞지 않으면, 맞지 않는 방향에 여백이 생깁니다. 와이드스크린 영상을 구형 TV에서 볼 때 화면 위아래에 검은 띠가 나타나던 것을 떠올리면 쉽게 이해할 수 있습니다.
2. object-fit: cover
cover는 원본 비율을 유지하면서 콘텐츠 박스 전체를 꽉 채웁니다. 비율이 일치하지 않으면 이미지의 일부가 잘려나가더라도 영역을 모두 덮습니다.
3. object-fit: fill
fill(기본값)은 원본 비율과 상관없이 요소의 콘텐츠 박스에 딱 맞도록 이미지 크기를 조절합니다. 이 경우 이미지가 늘어나거나 찌그러져 보일 수 있습니다.
4. object-fit: none
none은 이미지를 원본 크기 그대로 표시합니다. 컨테이너보다 이미지가 클 경우 초과된 부분은 잘려 보일 수 있습니다.
5. object-fit: scale-down
scale-down은 none과 contain 중에서 결과물의 전체 크기가 더 작아지는 쪽을 자동으로 선택합니다. 이 예시에서는 contain이 선택됩니다.
브라우저 지원 현황
object-fit 속성은 대부분의 최신 브라우저에서 폭넓게 지원됩니다. 다만 구버전 Internet Explorer, Microsoft Edge 또는 Opera 브라우저를 대상으로 개발하는 경우라면, 지원 여부를 사전에 반드시 확인하는 것이 좋습니다.
마무리
이번 글에서는 object-fit 속성에 대해 알아보았습니다. 이 속성은 컨테이너에 삽입되어 공간을 채우는 요소에 사용되며, <img> 태그나 기타 대체 요소(replaced element)에 직접 적용하여 이미지가 컨테이너를 어떻게 채울지 제어할 수 있습니다. 여기에 object-position 속성을 함께 사용하면 컨테이너 안에서 요소가 표시되는 위치까지 세밀하게 조정할 수 있으니 참고하세요.