이 CSS object-fit 비교기는 이미지가 틀 안에서 어떻게 크기가 조절되고 잘리는지 보여 줍니다. 틀의 가로·세로를 비율로 입력하면 다섯 가지 object-fit 값(fill, contain, cover, none, scale-down)이 같은 이미지로 나란히 그려집니다. 하나를 눌러 선택하고, 그 틀 안에서 끌거나 슬라이더로 object-position 퍼센트를 정하세요. 복사 버튼은 선택한 틀의 object-fit: ...; object-position: ...% ...%;를 줍니다.

4:3 사진을 정사각형 썸네일에 넣거나 16:9 히어로에 넣어 본 사람이라면 이미지가 늘어나거나, 빈 띠가 생기거나, 가장자리가 잘리는 경험을 했을 것입니다. object-fit은 그 셋 중 무엇이 일어날지를 정하고, object-position은 잘릴 때 어느 부분이 남을지를 정합니다. 얼굴이 잘리느냐 이마가 잘리느냐가 갈리는 지점입니다.

미리보기는 모서리와 중앙에 이름이 적힌 내장 샘플 이미지로 시작하며, 내 이미지를 불러와 실제 잘림을 볼 수도 있습니다. 틀은 고정 픽셀이 아니라 종횡비로 그려집니다. 입력한 내용과 고른 이미지는 브라우저 밖으로 나가지 않습니다.

사용 방법

틀의 가로·세로 입력
각각 0보다 크고 10000 이하인 숫자(소수 포함)를 입력하거나 16:9 같은 비율 칩을 고릅니다. 비율만 의미가 있어서 16과 9는 1600과 900과 같은 틀을, 1.91과 1은 Open Graph 카드 모양을 그립니다.
맞춤 방식 선택
다섯 틀이 한꺼번에 보입니다. fill, contain, cover, none, scale-down이 이미지를 어떻게 다루는지 비교한 뒤 원하는 틀을 누르면 그 CSS가 결과에 나타납니다.
객체 위치 설정
선택한 틀 안에서 끌거나 두 슬라이더를 움직여 가로·세로를 0에서 100 사이 퍼센트로 정합니다. 50과 50이면 가운데입니다. 이미지가 틀보다 크거나(cover, none) 작을 때(contain, scale-down) 위치가 의미를 가집니다.
CSS 복사
object-fit과 object-position 줄을 복사해 <img>, <video> 같은 대체 요소에 추가합니다. 요소에는 너비와 높이도 정해져 있어야 합니다.

작동 원리

object-fit 다섯 가지 값

object-fit은 W3C의 CSS Images Module Level 3에 정의되어 있으며 <img>, <video>, <canvas> 같은 대체 요소에 적용됩니다. 콘텐츠를 요소 상자 안에 어떻게 맞출지 정합니다. 300 x 300 상자에 1600 x 900 이미지를 넣는 경우를 보세요.

값	동작	300 x 300 상자의 1600 x 900 이미지
fill	비율을 무시하고 틀에 맞춰 늘림	300 x 300, 왜곡됨
contain	전체가 들어가게 비율 유지, 빈 띠 남음	300 x 168.75, 위아래로 65.625px씩 빈 띠
cover	틀을 채우게 비율 유지, 넘치는 부분 잘림	533.33 x 300, 가로 233.33px 잘림
none	크기 조절 없이 원본 크기, 넘치는 부분 잘림	1600 x 900, 대부분 잘림
scale-down	none과 contain 중 작은 쪽 선택	여기서는 contain과 같음, 이미지가 이미 작으면 원본 크기 유지

object-position의 동작

object-position은 요소 상자 안에서 콘텐츠 상자의 위치를 정하며 background-position과 같은 퍼센트 규칙을 씁니다. 이동량은 (틀 크기 - 이미지 크기) x 퍼센트입니다. 400 x 300 틀에 1600 x 900 이미지를 cover로 넣으면 이미지는 533.33 x 300이 됩니다. 가로 위치 50%이면 (400 - 533.33) x 0.5 = -66.67px 이동해 양쪽에서 66.67px씩 가려집니다. 25%이면 -33.33px 이동해 왼쪽은 33.33px, 오른쪽은 100px이 잘려, 왼쪽에 있는 피사체가 남습니다.

기본값은 50% 50%라서 가운데 기준 자르기가 표준입니다. 인물 사진이라면 머리가 사진 위쪽에 있으므로 세로 위치를 20~30% 근처로 두면 얼굴이 틀 안에 남습니다.

object-fit과 background-size

cover와 contain은 background-size에도 있으며 같은 방식으로 동작합니다. 실질적인 차이는 의미에 있습니다. object-fit을 쓰는 <img>는 alt 텍스트, 지연 로딩, srcset을 유지하지만 CSS 배경은 그렇지 않습니다. 콘텐츠 이미지에는 object-fit, 장식에는 background-size를 쓰세요.

실제 예시

기본 16:9 cover

입력

틀 16 / 9, 맞춤 cover, 위치 50% 50%

출력

object-fit: cover; object-position: 50% 50%;

틀은 aspect-ratio 16 / 9로 그려집니다.

레터박스가 있는 정사각형 아바타 틀

입력

틀 1 / 1, 맞춤 contain, 위치 0% 100%

출력

object-fit: contain; object-position: 0% 100%;

가로로 긴 이미지가 가운데 대신 정사각형의 아래쪽에 붙어 놓이고, 빈 띠는 위쪽에만 남습니다.

상품 사진, 윗부분 유지

입력

틀 400 / 200, 맞춤 cover, 위치 50% 20%

출력

object-fit: cover; object-position: 50% 20%;

cover가 이 넓은 틀을 채우며 세로로 넘치는 부분을 자르고, 세로 위치 20%가 이미지 상단을 더 많이 보여 줍니다.

크기 조절 없는 자르기

입력

틀 16 / 9, 맞춤 none, 위치 50% 50%

출력

object-fit: none; object-position: 50% 50%;

원본 크기의 이미지에서 가운데 부분만 보이며 스프라이트나 픽셀 아트에 유용합니다.

Open Graph 카드 비율

입력

틀 1.91 / 1, 맞춤 cover, 위치 50% 30%

출력

object-fit: cover; object-position: 50% 30%;

비율만 쓰이므로 소수 크기도 괜찮습니다(aspect-ratio: 1.91 / 1).

거부되는 입력

입력

틀 0 / 9

출력

0보다 크고 10000 이하인 숫자를 입력해 주세요.

틀 한 변이 0, 음수, 또는 너무 크면 이 메시지가 나오고 CSS는 만들어지지 않습니다.

자주 하는 실수

이미지에 너비와 높이가 없음
요소에 크기가 없으면 object-fit이 맞출 대상이 없습니다. width: 100%에 height: auto이면 상자가 이미지 비율을 따라가므로 cover가 눈에 띄는 효과를 내지 못합니다. 둘 다 지정하거나 aspect-ratio를 쓰세요.
cover가 자르지 않을 것이라는 기대
틀과 이미지의 비율이 다르면 cover는 항상 자릅니다. 차트나 글자가 있는 스크린샷처럼 가장자리가 잘리면 안 되는 이미지에는 contain을 쓰세요.
div에 적용
object-fit은 대체 요소에만 영향을 줍니다. 배경 이미지가 있는 <div>에는 background-size: cover를 쓰세요.
퍼센트 위치의 혼동
위치 100%는 이미지의 오른쪽 가장자리를 틀의 오른쪽 가장자리에 맞추는 것이지 그 너머로 100%만큼 보내는 것이 아닙니다. 이미지가 틀보다 작으면(contain) 퍼센트가 클수록 오른쪽으로 가고, 크면(cover) 오른쪽이 드러나고 왼쪽이 가려집니다.
로딩 중 레이아웃 이동
명시적인 width, height, aspect-ratio가 없으면 이미지가 로드되는 순간 페이지가 튑니다. CSS나 HTML 속성에 틀의 비율을 미리 정해 두세요.

자주 묻는 질문

object-fit cover와 contain은 무엇이 다른가요?

cover는 틀을 완전히 채울 때까지 키우고 넘치는 부분을 자릅니다. contain은 전체가 안에 들어갈 때까지만 키우며 비율이 다르면 빈 띠가 남습니다.

크기가 고정된 상자에서 이미지가 늘어나지 않게 하려면?

기본값 fill 대신 cover나 contain을 쓰세요. 둘 다 이미지의 종횡비를 유지합니다.

object-fit: scale-down은 무엇을 하나요?

none과 contain을 비교해 결과가 더 작은 쪽을 씁니다. 틀보다 작은 이미지는 원본 크기를 유지하고, 큰 이미지는 맞게 줄어듭니다.

잘릴 때 어느 부분을 남길지 정하려면?

object-position을 바꾸세요. 예를 들어 object-position: 50% 20%는 세로로 긴 사진의 윗부분을 남기고 아래쪽을 더 잘라냅니다.

video에도 object-fit이 적용되나요?

네. <video>, <img>, <canvas> 등 대체 요소에 모두 적용되므로 object-fit: cover로 영상을 히어로 영역에 맞춰 자를 수 있습니다.

내 이미지로도 해 볼 수 있나요?

네. 이미지 파일을 놓거나 선택하면 다섯 틀이 그 이미지를 씁니다. 브라우저 안에서 임시 로컬 주소로만 읽으며 업로드되지 않으므로 비공개 사진의 자르기도 안전합니다.

object-fit은 모든 브라우저에서 지원되나요?

현재 주요 브라우저에서는 모두 동작합니다. 지원하지 않는 것은 Internet Explorer뿐이며 이미 종료된 브라우저입니다.

1.91 같은 소수 틀 크기도 쓸 수 있나요?

네. 가로·세로는 1.91 / 1 같은 aspect-ratio를 만들므로 0보다 크고 10000 이하인 숫자면 됩니다. 0, 음수, 더 큰 값은 거부됩니다.

마지막 업데이트: 2026년 10월 3일

도구 작업 공간

사용 방법

틀의 가로·세로 입력

맞춤 방식 선택

객체 위치 설정

CSS 복사

작동 원리

object-fit 다섯 가지 값

object-position의 동작

object-fit과 background-size

실제 예시

자주 하는 실수

이미지에 너비와 높이가 없음

cover가 자르지 않을 것이라는 기대

div에 적용

퍼센트 위치의 혼동

로딩 중 레이아웃 이동

자주 묻는 질문

다음에 쓸 도구