Aspect Ratio Calculator
Aspect ratio를 계산하고, 변환하고, 미리보기하세요. 비율을 유지하면서 크기를 조정하고 바로 사용 가능한 CSS 코드를 생성해요.
작동 방식: 너비와 높이를 입력하면 aspect ratio를 계산할 수 있어요. 비율을 잠그고 한 쪽 크기를 변경하면 다른 쪽이 자동으로 조정돼요. 일반적인 형식의 프리셋을 확인하고 CSS 코드를 복사해요.
aspect-ratio: 16 / 9;Aspect Ratio란?
Aspect ratio는 이미지, 비디오, 화면의 너비와 높이 사이의 비례 관계로, width:height 형식으로 표현돼요. 콘텐츠의 모양을 정의하는데, 예를 들어 16:9는 넓은 직사각형이고 1:1은 완벽한 정사각형이에요. Aspect ratio는 미디어 제작, 반응형 웹 디자인, UI 레이아웃에서 원하지 않는 자르기나 늘어남 없이 다양한 기기와 플랫폼에 콘텐츠가 올바르게 표시되도록 하는 데 필수적이에요.
일반적인 Aspect Ratio
16:9는 HD 및 4K 비디오, YouTube, 대부분의 최신 모니터의 표준이에요. 4:3은 구형 TV 방송과 초기 컴퓨터 모니터의 기본이었어요. 1:1은 Instagram의 사각형 포스트처럼 소셜 미디어 플랫폼에서 널리 사용돼요. 21:9(초광시야각)는 시네마틱 콘텐츠와 초광시야각 게이밍 모니터에서 인기 있어요. 3:2는 35mm 필름과 DSLR 사진의 클래식 비율이에요. 9:16은 TikTok, Reels, Stories에서 사용하는 세로 포맷이에요.
CSS의 Aspect Ratio
최신 CSS는 모든 요소에 preferred aspect ratio를 설정할 수 있는 aspect-ratio 속성을 제공해요 (예: aspect-ratio: 16 / 9). 이는 수년 동안 사용되던 구식 padding-top percentage hack을 없애줘요. object-fit (cover, contain, fill)과 함께 사용하면 원래 비율을 유지하면서 이미지와 비디오가 컨테이너를 정확히 어떻게 채울지 제어할 수 있어요. aspect-ratio 속성은 모든 최신 브라우저에서 지원돼요.
Aspect Ratio 팁
- JavaScript 없이 반응형 컨테이너를 위해 CSS aspect-ratio 속성을 사용하세요
- 항상 aspect ratio를 대상 플랫폼에 맞추세요 (YouTube는 16:9, TikTok은 9:16, Instagram은 1:1)
- aspect-ratio와 object-fit: cover를 조합해서 레터박싱을 방지하세요
- 이미지를 크기 조정할 때 비율을 잠가서 왜곡을 방지하세요
- Open Graph 및 소셜 공유 미리보기를 위해 2:1 또는 1.91:1을 사용하세요
- 모든 화면 크기에서 비율이 유지되도록 여러 breakpoint에서 레이아웃을 테스트하세요