사용 방법
- 크기를 조정하려면 비율을 입력하세요(예: 16과 9). 또는 자주 쓰는 비율을 선택한 다음 너비나 높이를 입력하면 나머지 값이 계산됩니다.
- 비율을 구하려면 이미지, 화면 또는 동영상의 너비와 높이를 입력하세요.
- 미리보기를 확인하고 웹 레이아웃에 필요한 경우 CSS aspect-ratio 규칙을 복사하세요.
작동 방식
비율을 유지하며 크기를 조정할 때는 높이 = 너비 × 비율의 세로 값 ÷ 비율의 가로 값(또는 그 반대)으로 계산합니다. 픽셀 크기는 보통 정수이므로 결과를 반올림할 수 있습니다. 1000 너비에서 16:9처럼 비율이 정수로 나누어떨어지지 않으면, 반올림한 높이(563)는 정확히 일치하는 값이 아니라 근삿값입니다.
최대공약수로 양쪽 값을 나누면 크기를 간단한 비율로 나타낼 수 있습니다. 1920과 1080은 둘 다 120으로 나누어지므로 16:9가 됩니다. 실제 크기 중에는 익숙한 비율로 줄일 수 없는 것도 있습니다. 1366×768은 정확히 683:384이며 16:9에 매우 가까우므로, 이 도구는 차이가 2% 이내일 때 가장 가까운 일반 비율도 표시합니다. 마찬가지로 “21:9” 모니터의 실제 비율은 64:27(2560×1080) 또는 43:18(3440×1440)입니다. 21:9는 마케팅 명칭입니다.
CSS에서 aspect-ratio: 16 / 9를 사용하면 너비가 바뀌어도 요소가 해당 비율을 유지합니다. 이는 동영상 삽입이나 이미지가 로드되는 동안 레이아웃이 움직이지 않도록 하는 이미지 플레이스홀더에 유용합니다.
예시
동영상 썸네일 크기
너비가 1280픽셀이어야 하는 16:9 썸네일의 높이는 720픽셀입니다.
화면 비율 확인
2560×1600은 8:5로 단순화되며, 이는 노트북에서 흔히 사용하는 16:10과 같습니다.
소셜 미디어용 세로형 자르기
비율이 4:5이고 너비가 1080이면 높이는 1350입니다. 여러 피드에서 허용하는 세로형 크기입니다.
자주 묻는 질문
16:9와 1.78:1은 같은 비율인가요?
네. 16 ÷ 9 ≈ 1.778이므로 같은 비율을 나타냅니다. 영화 화면 비율은 2.39:1처럼 소수로 표기하는 경우가 많습니다.
결과에 소수점이 표시되는 이유는 무엇인가요?
모든 너비가 비율에 맞게 나누어떨어지는 것은 아닙니다. 픽셀 크기를 계산할 때 반올림을 켜면 가장 가까운 정수 픽셀로 표시되며, 정확한 비율과 픽셀 일부만큼 차이가 날 수 있습니다.
CSS aspect-ratio 속성은 모든 브라우저에서 작동하나요?
현재 주요 브라우저에서 모두 지원합니다. 요소의 너비와 높이를 모두 직접 지정한 경우에는 해당 값이 aspect-ratio보다 우선합니다.
개인정보 보호
모든 계산은 브라우저에서 처리됩니다. 데이터는 전송되거나 저장되지 않습니다.