가로 폭과 비율만 넣으면 세로 높이와 aspect-ratio·패딩 비율 CSS를 바로 만들고 복사할 수 있습니다.
💡 종횡비 결과
비율을 맞춘 세로 높이: 0
구형 브라우저용 패딩 비율: 0%
📊 적용 안내
* 실무에서는 보통 width: 100% + aspect-ratio로 비율을 고정하고, max-width에 시안 px을 둡니다. 구형 브라우저용 padding-top은 주석으로 넣었습니다.
💡 aspect-ratio로 이미지·영상 비율 고정하기
이미지·유튜브·광고 영역이 늦게 로드되면 아래 내용이 밀리며 화면이 흔들릴 수 있습니다. 가로 대비 세로 비율(종횡비)을 미리 잡아 두면, 미디어가 오기 전에도 자리를 비워 둘 수 있습니다. 이 계산기는 시안 px 가로 폭과 비율만 넣으면 세로 높이와 aspect-ratio CSS, 구형 브라우저용 패딩 비율을 바로 만들어 줍니다.
세로 높이는 (가로 폭 × 세로 비율 ÷ 가로 비율)입니다. 패딩 비율은 (세로 비율 ÷ 가로 비율) × 100입니다. 예를 들어 16:9면 패딩은 56.25%이고, 가로 640px이면 세로는 360px입니다. aspect-ratio와 패딩 % 자체는 rem·px과 무관한 비율입니다.
📊 자주 쓰는 비율과 패딩 %
아래는 실무에서 자주 쓰는 비율과, 구형 대응에 쓰는 패딩 비율입니다. 계산기가 쓰는 식과 같습니다.
| 비율 | 패딩 계산 | 패딩 % | 자주 쓰는 곳 |
|---|---|---|---|
| 16 : 9 | (9 ÷ 16) × 100 | 56.25% | 유튜브 임베드, 와이드 배너 |
| 4 : 3 | (3 ÷ 4) × 100 | 75.00% | 썸네일, 카드형 이미지 |
| 1 : 1 | (1 ÷ 1) × 100 | 100.00% | 정사각 갤러리, 상품 목록 |
| 21 : 9 | (9 ÷ 21) × 100 | 42.86% | 가로로 긴 배경·시네마형 영역 |
📌 aspect-ratio와 padding 방식
최근 브라우저에서는 aspect-ratio: 16 / 9; 한 줄로 비율을 고정할 수 있습니다. 다만 일부 구형 브라우저·인앱 웹뷰에서는 지원이 약할 수 있어, 예전에는 padding-top(또는 padding-bottom) 퍼센트로 세로 공간을 확보하는 방식을 많이 썼습니다.
이 도구는 모던용 aspect-ratio를 기본으로 넣고, 패딩 비율은 주석으로 함께 줍니다. 필요하면 주석을 풀어 구형 대응을 추가하면 됩니다. 안쪽 이미지가 비율 밖으로 늘어나지 않게 하려면 object-fit: cover를 함께 쓰는 경우가 많습니다.
⚙️ 왜 기본이 px인가요
시안(피그마 등)은 대부분 px로 적혀 있고, 실무에서도 박스 max-width를 px로 두는 경우가 많습니다. rem은 글자·여백에 더 자주 쓰이고, 종횡비 계산의 핵심은 아닙니다. rem 단위는 “이 max-width가 rem일 때 세로가 대략 얼마인지” 참고할 때만 쓰면 됩니다.
세로로 긴 비율(숏폼 등)은 한 화면에 너무 많이 차지할 수 있습니다. 필요하면 부모에 max-height를 두어 높이를 제한하세요. 적용 후에는 개발자 도구로 폭을 줄이며 비율이 유지되는지 보면 됩니다.
광고·영상 iframe도 같은 방식으로 자리를 미리 잡으면, 로드 후 아래로 밀리는 느낌을 줄일 수 있습니다. 화면 흔들림을 완전히 없애 주지는 않지만, 비율 박스를 정해 두는 것은 자주 쓰는 방법입니다.
🚨 이용 시 주의사항
부모에 max-width나 box-sizing: border-box가 있으면 실제 보이는 크기가 입력값과 조금 다를 수 있습니다. 코드를 붙인 뒤에는 모바일·태블릿·데스크톱 폭에서 한 번씩 확인해 주세요. 21:9 패딩은 이 계산기 반올림 기준으로 42.86%입니다.
