개발 도구

이미지 가로세로 비율 계산기 디바이스 해상도 산출기

16:9, 4:3, 1:1, 21:9 등 표준 화면비 및 임의의 해상도 비율을 즉시 계산하고 반응형 CSS padding-top 값을 자동 도출합니다.

가로 너비 (Width px)

세로 높이 (Height px)

최대공약수 기약 종횡비

16 : 9

표준 분수 비율

소수점 환산 비율 (1:N)

1.778 : 1

너비 1 대비 높이 비율

반응형 패딩 비율

56.25%

CSS padding-top 트릭용

aspect-ratio: 16 / 9;

padding-top: 56.25%; /* 구형 브라우저 */

규격 이름	가로 픽셀	세로 픽셀	총 픽셀 수
4K UHD	3840 px	2160 px	8,294,400 px
QHD (2K)	2560 px	1440 px	3,686,400 px
Full HD	1920 px	1080 px	2,073,600 px
HD 720p	1280 px	720 px	921,600 px
모바일 뷰	750 px	422 px	316,500 px

사용 방법 3단계

분석할 기준 가로 너비와 세로 높이를 입력합니다.

도출된 표준 비율(16:9 등)과 축소 비율을 확인합니다.

웹사이트 구축에 필요한 CSS aspect-ratio 속성을 복사하여 사용합니다.

최신 CSS에서는 `aspect-ratio: 16 / 9;` 속성을 주거나 구형 호환을 위해 `padding-top: 56.25%;` 기법을 사용합니다.

반응형 이미지 srcset sizes 속성과 최적 해상도 지정

모바일, 태블릿, 데스크톱 등 디바이스 뷰포트와 DPR(디바이스 픽셀 비율)에 맞춰 최적 규격 이미지를 서빙하는 반응형 마크업 표준을 정리합니다.

CLS 레이아웃 이동 방지와 이미지 종횡비 고정 기법

이미지 다운로드 전 레이아웃이 덜컥거리는 CLS(Cumulative Layout Shift) 문제를 CSS aspect-ratio 및 너비/높이 속성으로 완벽히 해결하는 가이드입니다.