Aspect Ratio Calculator
정확한 화면 비율을 계산하고 시각적인 프리뷰와 최적의 CSS 코드를 확인하세요.
PREVIEW
Modern CSS (aspect-ratio)
aspect-ratio: 16 / 9;
Legacy CSS (Padding Hack)
.container { position: relative; width: 100%; padding-top:
56.25%; }
.content { position: absolute; top: 0; left: 0; width:
100%; height: 100%; }
📖 사용 방법
- Base Ratio: 원하는 비율을 직접 입력하거나 프리셋 버튼을 클릭하여 설정합니다.
- Dimensions: 알고 있는 가로 또는 세로 값을 입력하면 비율에 맞는 나머지 수치가 자동 계산됩니다.
- Preview: 설정한 비율대로 박스의 모양이 실시간으로 변하며 크기감이 시각화됩니다.
-
Code: 최신 브라우저용
aspect-ratio속성과 하위 브라우저 호환성을 위한padding-top코드를 모두 제공합니다.