신입 퍼블리셔 시절, 게시판 목록을 만들 때마다 가장 골치 아팠던 건 ‘제각각인 이미지 사이즈’였습니다. 어떤 건 길쭉하고, 어떤 건 납작했죠. 이걸 width: 100%; height: 200px;로 강제 고정해버리면 여지없이 사진이 홀쭉해지거나 뚱뚱해졌습니다.
“이미지를 보여주는 창문(Frame)만 만들고, 풍경(Image)은 자연스럽게 잘라내면 안 될까?” 이 고민을 해결해 준 것이 바로 object-fit입니다. 이제 <div> 배경으로 이미지를 넣는 꼼수는 그만두세요. 검색엔진이 좋아하는 <img> 태그를 쓰면서도 비율을 완벽하게 지킬 수 있습니다.
1. object-fit: cover의 작동 원리
이 속성을 적용하면 <img> 태그는 마치 액자 틀처럼 변합니다. 이미지는 그 틀을 ‘가득 채울 때까지(Cover)’ 확대되거나 축소됩니다.
핵심은 ‘비율 고정’입니다. 빈 공간이 생기지 않도록 이미지를 늘리되, 넘치는 부분은 과감하게 잘라냅니다(Crop). 그래서 원본이 가로로 긴 파노라마 사진이든, 세로로 긴 셀카 사진이든 상관없이 지정된 박스를 꽉 채우면서도 찌그러지지 않습니다.
.profile-img {
width: 200px; /* 원하는 너비 */
height: 200px; /* 원하는 높이 */
object-fit: cover; /* 마법의 주문 */
border-radius: 50%; /* 원형 프로필 만들 때 필수 */
}
“솔직히 고백하자면, 예전엔 이 기능이 없어서 서버에서 이미지를 저장할 때 리사이징을 하거나, CSS background-size: cover를 썼습니다. 하지만 배경 이미지는 검색 엔진이 ‘이미지’로 인식하지 못하죠. SEO(검색 최적화)를 생각한다면 무조건 object-fit을 써야 합니다.”
2. 헷갈리는 형제들: contain vs fill
cover만 있는 게 아닙니다. 상황에 따라 다른 값이 필요할 때가 있습니다.
- ✅ contain (포함하다): 이미지가 잘리면 절대 안 되는 경우(예: 제품 전체샷, 로고)에 씁니다. 비율은 유지되지만, 박스 안에 빈 공간(여백)이 생길 수 있습니다.
- ✅ fill (채우다): 기본값입니다. 비율을 무시하고 박스 크기에 억지로 맞춥니다. 우리가 피해야 할 바로 그 ‘찌그러짐’을 유발하는 범인입니다.
💡 코드캠의 실전 TIP: 머리가 잘렸다면?
object-fit: cover는 기본적으로 이미지를 가운데 정렬(Center)해서 자릅니다. 그러다 보니 인물 사진에서 머리 윗부분이 잘려 나가는 경우가 있죠. 이때 짝꿍 속성인 object-position을 쓰세요.object-position: top center;
이렇게 하면 이미지의 기준점을 ‘위쪽’으로 잡아서, 얼굴이 잘리는 걸 방지할 수 있습니다.
3. 반응형 웹에서의 강력함
PC에서는 가로형 카드 뉴스였다가, 모바일에서는 정사각형 썸네일로 변해야 하나요?
예전 같으면 포토샵으로 이미지를 두 벌 만들었겠지만, 이제는 CSS 미디어 쿼리와 object-fit만 있으면 이미지 파일 하나로 해결됩니다. 브라우저가 알아서 비율에 맞춰 잘라주니, 로딩 속도도 빨라지고 관리 포인트도 줄어듭니다.
이미지는 콘텐츠의 첫인상입니다
아무리 좋은 글과 상품이라도, 찌그러진 썸네일을 보는 순간 사용자는 “관리가 안 되는 사이트구나”라고 느낍니다. object-fit: cover는 단순한 CSS 속성이 아니라, 사용자에게 시각적 편안함을 주는 배려입니다.
오늘 당장 여러분의 웹사이트를 점검해 보세요. 혹시 홀쭉하거나 뚱뚱해진 이미지가 울고 있지는 않나요?
혹시 구형 브라우저(IE) 호환성 때문에 고민이신가요? 댓글로 상황을 남겨주시면 폴리필(Polyfill) 적용법이나 대체 방안을 알려드리겠습니다!
