CSS 가로세로 비율 계산기

계산 입력

가로 (px)

세로 (px)

결과

화면비

16 : 9

약분된 비율

소수점 비율 (가로÷세로)	1.7778
padding-top 기법 (%)	56.25%

CSS 가로세로 비율 계산기란?

이 도구는 임의의 픽셀 가로·세로 값을 16:9, 4:3처럼 깔끔하게 약분된 화면비로 바꿔 줍니다. 또한 동영상, iframe, 이미지 래퍼 같은 반응형 컨테이너의 비율을 고정할 때 쓰는 전통적인 padding-top 퍼센트도 함께 계산합니다. 이는 최신 CSS aspect-ratio 속성이 널리 지원되기 전부터 즐겨 쓰이던 기법입니다.

사용 방법

원본 가로와 세로 값을 픽셀 단위로 입력하세요. 계산기는 최대공약수(GCD)를 이용해 비율을 가장 간단한 형태로 약분하고, 소수점 비율(가로 ÷ 세로)을 보여 주며, CSS에 그대로 붙여 넣을 수 있는 padding-top 퍼센트까지 제공합니다.

공식 풀이

먼저 가로와 세로의 최대공약수(GCD)를 구합니다. 두 값을 GCD로 나누면 약분된 비율이 나옵니다. 예를 들어 1920과 1080의 GCD는 120이므로 비율은 16:9가 됩니다. padding-top 기법은 세로 ÷ 가로 × 100 공식을 쓰는데, CSS에서 퍼센트로 지정한 padding 값이 요소의 가로 너비를 기준으로 계산되기 때문입니다.

$$\text{Ratio} = \frac{\text{Width}}{\gcd} : \frac{\text{Height}}{\gcd}$$ $$\text{Padding} = \frac{\text{Height}}{\text{Width}} \times 100\% \qquad \text{Decimal} = \frac{\text{Width}}{\text{Height}}$$

padding-top 퍼센트 값은 반응형 박스에서 높이를 너비에 비례하게 유지합니다.

종횡비는 너비와 높이의 비율을 최대공약수로 약분한 값입니다.

계산 예시

1920×1080 이미지의 경우: \(\gcd(1920, 1080) = 120\). 비율 = \(\frac{1920}{120} : \frac{1080}{120} =\) 16:9. 소수점 비율 = \(1920 \div 1080 \approx 1.7778\). padding-top = \(1080 \div 1920 \times 100 =\) 56.25%. 따라서 반응형 래퍼에는 padding-top: 56.25%를 적용하면 됩니다.

자주 묻는 질문

aspect-ratio 속성 대신 굳이 padding-top을 쓰는 이유는? padding-top 기법은 아주 오래된 브라우저까지 포함해 모든 브라우저에서 작동합니다. 최신 프로젝트라면 aspect-ratio: 16 / 9;를 그냥 쓰면 됩니다.

퍼센트 계산의 기준은 가로인가요, 세로인가요? CSS에서 세로 방향 padding 퍼센트는 항상 부모 블록의 가로 너비를 기준으로 합니다. 그래서 공식이 세로 ÷ 가로인 것이죠.

값이 깔끔하게 약분되지 않으면 어떻게 하나요? 어떤 가로·세로 값이든 유효한 비율은 나옵니다. 다만 16:9처럼 흔히 부르는 이름과 딱 맞지 않을 수 있습니다. 이런 경우에는 소수점 비율이 특히 유용합니다.