📺 aspect-ratio 생성기 | 비율 고정 코드 복사

자주 쓰는 비율

가로 비율

세로 비율

최대 너비 (0이면 넣지 않음)

안쪽 요소 채우기 방식

영상 임베드나 썸네일 자리처럼 가로세로 비율을 고정해야 하는 상자의 CSS를 만들어 줍니다. 자주 쓰는 비율을 고르거나 직접 숫자를 넣으면 최신 브라우저용 aspect-ratio 선언과 구형 브라우저용 padding-top 폴백을 함께 뽑아 줍니다.

aspect-ratio는 가로와 세로를 사선으로 나눠 적는 비율 속성입니다. 폴백은 백분율 padding이 부모 너비를 기준으로 계산되는 성질을 이용해 세로 ÷ 가로 × 100 을 padding-top에 넣고, 안쪽 요소를 절대 배치로 네 변에 붙입니다. 폴백은 @supports not 으로 감싸 두어 aspect-ratio를 지원하는 브라우저에서는 적용되지 않습니다. 속성 정의는 W3C CSS Box Sizing Level 4 를 따릅니다(2026년 10월 기준).

폴백에서는 inset 대신 top·right·bottom·left를 각각 적습니다. 비율 상자는 안쪽에 요소 하나를 넣는 구조를 가정하며, 여러 요소를 쌓는 레이아웃이나 반응형 이미지 srcset 생성은 지원하지 않습니다. 미리보기는 이 브라우저가 지원하는 최신 경로로 그려집니다.

자주 묻는 질문

padding-top에 왜 세로 ÷ 가로 비율을 쓰나요?

padding의 백분율은 부모의 너비를 기준으로 계산됩니다. 그래서 세로를 가로로 나눈 비율을 padding-top에 넣으면 너비에 비례한 높이가 만들어집니다.

폴백 블록을 꼭 같이 넣어야 하나요?

요즘 주요 브라우저는 aspect-ratio를 지원합니다. @supports로 감싸 두었으므로 지원하는 브라우저에서는 폴백이 무시되니 넣어 둬도 손해가 없습니다.

비율을 1920 : 1080처럼 넣어도 되나요?

됩니다. 두 값이 정수면 최대공약수로 약분한 형태로 코드를 만들고, 약분 전후를 결과에 함께 보여 줍니다.

📺CSS aspect-ratio 코드 생성기

관련된 도구

이미지·영상 종횡비 계산기

CSS 그라디언트 생성기

자주 묻는 질문

관련된 도구

이미지·영상 종횡비 계산기

CSS 그라디언트 생성기

자주 묻는 질문

같은 카테고리 도구