CSS object-fit 계산기 (cover·contain)
컨테이너·이미지 크기를 넣으면 object-fit: cover·contain 각각의 렌더링 크기와 잘려나가는(또는 레터박스로 남는) 영역을 px로 계산해 줍니다.
px
px
px
px
%
%
렌더링된 이미지 크기
533 × 300px
배율 0.333배
가로로 잘려나가는 양133px
세로로 잘려나가는 양0px
크롭 시작 오프셋X 67px · Y 0px
cover는 배율을 두 축 중 큰 쪽에 맞춰 컨테이너를 빈틈없이 채우는 대신 남는 부분을 잘라내고, contain은 작은 쪽에 맞춰 이미지 전체가 보이는 대신 여백(레터박스)이 남습니다. object-position은 cover로 잘려나가는 영역 안에서 어느 지점을 기준으로 남길지 정합니다(기본값 50% 50% = 정중앙).
사용 방법
- 1이미지를 담을 컨테이너 너비·높이와 원본 이미지 너비·높이를 입력합니다.
- 2cover(꽉 채움) 또는 contain(전체 보임) 중 쓸 값을 고릅니다.
- 3cover라면 object-position(%)까지 정해 크롭 기준점을 확인하고, 렌더링 크기·미리보기·잘리는 영역을 봅니다.
자주 묻는 질문
cover는 두 축 배율 중 큰 쪽에 맞춰 컨테이너를 빈틈없이 채우는 대신 넘치는 부분을 잘라내고, contain은 작은 쪽에 맞춰 이미지 전체가 보이는 대신 남는 공간이 여백(레터박스)으로 남습니다.
cover 모드에서 잘려나가는 영역 중 어느 지점을 기준으로 남길지 정합니다. 기본값 50% 50%는 정중앙을 기준으로 상하좌우를 고르게 잘라내고, 0%는 위·왼쪽 끝을, 100%는 아래·오른쪽 끝을 기준으로 잡습니다.
배율(scale)을 먼저 정합니다. contain은 scale = min(컨테이너 너비/이미지 너비, 컨테이너 높이/이미지 높이), cover는 그 반대로 max를 씁니다. 이 배율을 원본 크기에 곱한 값이 실제 렌더링 크기입니다.
aspect-ratio는 가로세로 비율 자체(최소 정수비·한쪽 길이 구하기)를 다룹니다. 이 계산기는 서로 다른 비율의 컨테이너와 이미지를 CSS object-fit으로 맞출 때 실제로 몇 px가 잘리거나 남는지를 다뤄 서로 보완적입니다.
알아두면 좋은 점
- MDN(object-fit)·css-tricks.com·dev.to의 "Cover vs Contain vs Stretch" 설명을 WebSearch로 교차 확인했습니다(2026-09-10). "cover=max 배율, contain=min 배율로 가로세로 비율을 유지한 채 확대·축소한다"는 원리 자체는 CSS 스펙이라 출처 간 이견이 없습니다.
- 네 모서리마다 다른 크롭을 지원하는 CSS clip-path 등 고급 조합은 다루지 않으며, 순수 object-fit·object-position 계산만 합니다.
- 입력값은 서버로 전송되지 않고 브라우저 안에서만 계산됩니다.
함께 보면 좋은 도구
border-radius 계산border-radius를 px·%로 서로 바꾸고, 요소 크기에 따라 실제 몇 px로 둥글게 나오는지 미리 봅니다.화면 비율 계산가로·세로 픽셀 값을 넣으면 16:9 같은 최소 정수비를 구하거나, 비율과 한쪽 길이로 나머지 길이를 계산합니다.gitignore 판정.gitignore 규칙과 경로를 넣으면 그 파일이 무시되는지, 어느 줄이 마지막으로 이겼는지 알려줍니다.울프람 규칙규칙 번호 0~255를 8비트로 풀어 세 칸 이웃에 대응시키고 세대를 쌓아 무늬를 그립니다.2-SAT「둘 중 하나는 참」인 조건을 여럿 넣으면 참·거짓 배정이 가능한지 판정하고 배정을 하나 찾아 줍니다.
마지막 검증: 2026년 9월 10일 · 결과는 참고용 추정치입니다.