기준일: 2026-10-08

16:9 원본 화면을 4:3 영역에 비율을 유지한 채 맞추는 fit은 위아래에 여백을 남기고, 영역을 가득 채우는 fill은 좌우를 잘라냅니다. 아래 가상 예시에서 중앙 정렬한 fit의 여백은 위아래 각각 96픽셀이고, fill의 잘림은 좌우 각각 정확히 170과 2/3픽셀입니다. 어느 쪽도 원본의 가로세로 비율을 늘여 바꾸지는 않습니다.

입력 기록

항목값
원본 너비와 높이1920픽셀 × 1080픽셀
대상 너비와 높이1024픽셀 × 768픽셀
비교 방식fit, fill
배치 조건비율 유지, 중앙 정렬

이 예시는 정사각형 픽셀, 고정된 화면 방향, 연속적인 균일 확대·축소를 가정합니다. 실제 게임이나 기기의 동작을 측정한 값은 아닙니다.

비율을 비교해 방식 선택하기

가로 배율은 대상 너비를 원본 너비로 나눈 1024픽셀 ÷ 1920픽셀 = 정확히 8/15, 즉 약 0.53입니다. 세로 배율은 768픽셀 ÷ 1080픽셀 = 정확히 32/45, 즉 약 0.71입니다. 배율에는 단위가 없습니다. 계산 중에는 이 정확한 분수를 유지하고, 표시할 때만 소수 둘째 자리에서 반올림합니다.

fit은 두 배율 중 작은 8/15를 선택합니다. 그래야 원본 전체가 대상 영역 안에 들어옵니다. fill은 큰 32/45를 선택합니다. 그래야 대상 영역에 빈 곳이 생기지 않습니다. 두 방식 모두 가로와 세로에 같은 배율을 적용합니다. 가로와 세로를 각각 대상 크기에 맞춰 늘이는 방식은 비율 자체가 달라지므로 이 계산과 구분해야 합니다.

fit: 위아래 여백 계산

fit 배율 8/15를 원본 높이 1080픽셀에 곱하면 표시 높이는 1080픽셀 × 8/15 = 576픽셀입니다. 표시 너비는 1920픽셀 × 8/15 = 1024픽셀로 대상 너비와 같습니다. 남은 세로 길이는 768픽셀 − 576픽셀 = 192픽셀입니다. 중앙에 놓으면 위와 아래가 이를 반씩 나누므로 192픽셀 ÷ 2 = 각각 96픽셀의 여백이 됩니다. 가로 여백은 없습니다.

fill: 좌우 잘림 계산

fill 배율 32/45를 원본 너비 1920픽셀에 곱하면 표시 너비는 정확히 4096/3픽셀, 즉 약 1365.33픽셀입니다. 표시 높이는 1080픽셀 × 32/45 = 768픽셀로 대상 높이와 같습니다. 대상 너비를 넘는 길이는 정확히 4096/3픽셀 − 1024픽셀 = 1024/3픽셀, 즉 약 341.33픽셀입니다. 중앙 정렬에서 좌우 잘림은 각각 1024/3픽셀 ÷ 2 = 512/3픽셀, 즉 약 170.67픽셀입니다. 소수 표시는 근삿값이며, 반올림한 표시 너비로 다시 빼서 정확한 잘림값을 구한 것은 아닙니다.

검산

fit에서는 표시 높이 576픽셀과 위아래 여백 96픽셀씩을 더하면 대상 높이 768픽셀이 됩니다. fill에서는 정확한 표시 너비 4096/3픽셀에서 좌우 잘림 512/3픽셀씩을 빼면 대상 너비 1024픽셀이 됩니다. 따라서 두 결과는 같은 입력과 중앙 정렬 조건에서 서로 다른 배율 선택으로 설명됩니다.

공식 출처

W3C CSS Images Level 3의 contain·cover 정의는 비율을 유지하면서 영역 안에 모두 넣거나 영역을 덮는 크기 조건을 설명합니다. 해당 문서는 Candidate Recommendation Draft이며, 이 글의 게임 엔진 동작을 보증하는 근거는 아닙니다. 출처 확인일은 2026-10-08입니다.

한계

이 계산은 수학적인 길이를 다루므로 소수 픽셀도 허용합니다. 실제 렌더러는 홀수 픽셀이나 부분 픽셀의 여백·잘림을 양쪽에 다르게 배분할 수 있습니다. 따로 반올림한 가로·세로 길이를 정확한 정수 픽셀 화면이라고 해석해서는 안 됩니다. 정수 배율만 허용하는 픽셀 퍼펙트 확대, 기기 픽셀 비율, 안전 영역, 게임 시야각과 엔진별 구현은 여기서 판단하지 않습니다. 입력은 각 변이 1픽셀부터 100000픽셀까지인 정수로 한정합니다. 0, 음수, 소수, 불리언, 빈 값, 유한하지 않은 값은 입력으로 받지 않습니다. 이 범위와 소수 둘째 자리의 ROUND_HALF_UP 표시 방식은 예시의 선택 규칙이며 W3C 요구사항은 아닙니다.

English summary: Fit keeps the whole image visible and leaves bars; fill covers the target and crops the excess. Both preserve the original aspect ratio.

직접 비교하려면 자신의 원본과 대상의 너비·높이를 기록한 뒤 가로·세로 배율을 정확히 계산하고, 작은 값으로 여백을, 큰 값으로 잘림을 구해 보세요.