정사각형 썸네일에서 사진이 잘릴 때: contain과 cover

SmartInfoBank 운영자 · 작성 2026-10-22 · 수정 2026-10-22 · 7분

정사각형 썸네일 영역에 가로형 사진을 넣었을 때 인물의 양옆이 잘려 나가거나, 반대로 위아래에 의도치 않은 빈 여백이 남는 현상을 자주 겪게 됩니다. 이 문제는 이미지 편집 도구로 사진을 직접 잘라낸 경우도 있지만, 웹 브라우저가 CSS 속성에 따라 표시 크기를 맞추는 과정에서 나타나는 시각적 결과물인 경우가 많습니다.

이미지 원본의 해상도 측정이나 파일 용량 단위에 대한 기본 개념은 이미지 용량과 해상도 차이에서 다루었으므로, 이번 글에서는 1200x800 원본 이미지를 300x300 컨테이너에 표시할 때 object-fit 속성값(contain과 cover)이 표시 크기와 잘림(clipping)에 미치는 영향을 수치로 계산해 봅니다.

파일 편집에 의한 잘림과 CSS 렌더링 잘림의 구분

웹 화면에서 이미지가 잘려 보인다고 해서 원본 파일의 픽셀 데이터가 실제로 사라진 것은 아닙니다. 파일 자체가 잘린 것인지 브라우저 표시 문제인지 구분하는 기준은 원본 해상도와 화면 표시 크기의 일치 여부입니다.

• 파일 자르기(Crop) 저장: 이미지 편집기에서 특정 영역을 잘라내고 새 파일로 저장한 상태입니다. 파일 자체의 가로세로 픽셀 수가 줄어들며, 잘려 나간 영역의 데이터는 완전히 삭제됩니다.
• CSS 표시 잘림(Clipping): MDN object-fit 명세에 정의된 속성을 통해 원본 파일 데이터는 온전히 보존하면서 컨테이너 박스 바깥으로 삐져나온 렌더링 영역만 화면에서 감추는 상태입니다.

contain과 cover의 렌더링 크기 계산 원리

가로 1200px, 세로 800px 크기의 사진은 가로세로 비율이 1.5:1(3:2)인 가로형 이미지입니다. 이 이미지를 가로와 세로가 모두 300px인 정사각형(1:1) 박스에 넣을 때, 브라우저는 object-fit 속성에 따라 서로 다른 스케일링 방식을 적용합니다.

300x300 상자에서 좌우 75px 크롭이 발생하는 과정

object-fit: cover를 지정하면 세로 300px 영역을 모두 채우기 위해 원본 이미지의 비율에 맞춰 세로를 300px로 맞춥니다. 원본 가로세로비가 1.5이므로, 렌더링되는 이미지의 가로 크기는 300px * 1.5 = 450px가 됩니다.

하지만 썸네일 컨테이너의 가로는 300px로 고정되어 있으므로, 450px 중 150px(450 - 300)는 컨테이너 경계 바깥으로 넘치게 됩니다. 기본 정렬 상태(object-position: 50% 50%)에서는 이미지가 중앙에 배치되므로, 좌측에서 75px, 우측에서 75px씩 대칭으로 잘려 나갑니다.

{
  "original_px": [
    1200,
    800
  ],
  "container_px": [
    300,
    300
  ],
  "contain_rendered_px": [
    300,
    200
  ],
  "cover_rendered_px": [
    450,
    300
  ],
  "cover_center_horizontal_crop_each_px": 75
}

브라우저 개발자 도구에서 실제 상태 점검하는 순서

사진이 잘린 원인이 CSS 렌더링인지 파일 손상인지 확인하려면 다음 순서로 점검합니다.

1. 요소 검사 열기: 브라우저에서 잘려 보이는 썸네일을 우클릭하고 '검사(Inspect)'를 선택합니다.
2. 원본 픽셀 크기 확인: 개발자 도구의 콘솔이나 속성 창에서 해당 <img> 요소의 naturalWidth와 naturalHeight를 확인합니다. 1200과 800이 표시된다면 원본 파일 자체는 잘리지 않은 상태입니다.
3. 적용된 CSS 확인: Styles 패널에서 object-fit 속성이 cover인지 contain인지 확인합니다.
4. 렌더링된 크기 측정: Computed 패널 또는 박스 모델 레이아웃에서 요소 크기가 300x300px로 제한되어 있는지 확인합니다.
5. 정렬 기준 확인: object-position 속성이 명시되어 있지 않다면 기본값인 50% 50%가 적용되어 좌우가 균등하게 75px씩 크롭된 것임을 알 수 있습니다.

CSS object-fit 사용 시 주의사항과 검증 한계

object-fit 속성은 브라우저 렌더링 단계에서 매우 편리하게 비율을 맞출 수 있도록 돕지만, 몇 가지 명확한 기술적 한계가 있습니다.

• 적용 대상의 제한: MDN 명세에 명시되어 있듯이 object-fit은 <img>나 <video> 같은 대체 요소(replaced element)에 작동하며, <iframe>, <embed>, <fencedframe> 요소에는 아무런 영향을 주지 않습니다.
• 네트워크 전송량 미감소: cover나 contain으로 표시 크기를 줄이거나 잘라내더라도, 브라우저는 1200x800 원본 파일 데이터를 그대로 내려받습니다. 즉, 네트워크 전송 용량과 디코딩 메모리는 원본 파일 크기만큼 소모됩니다.
• 주요 피사체 보존 불가: CSS는 이미지 속 피사체의 위치를 인식하지 못합니다. 중앙 정렬 상태에서 인물의 얼굴이나 텍스트가 좌우 75px 영역에 위치해 있다면 화면에서 그대로 잘려 나가므로, 중요한 피사체가 있는 경우 object-position 값을 수동으로 조정하거나 업로드 단계에서 구도를 재조정해야 합니다.