측면 비율 계산기 - 비율을 유지

화면 비율 은 무엇 인가?

An 화면 비율너비와 높이의 비례적인 관계입니다. 두 숫자를 두 점으로 나누어서 표현합니다. 직사각형의 모양을 정의합니다. 너비, 높이, 또는 사각형입니다. 실제 크기를 지정하지 않고요. 측면 비율은 사진, 비디오, 그래픽 디자인, 웹 개발 및 디스플레이 제조의 기본입니다.

이 계산기는 가장 큰 공통분모 (GCD) 알고리즘을 사용하여 모든 너비 x 높이 쌍을 가장 간단한 비율로 줄입니다. 또한 다른 너비로 확장 할 때 올바른 새로운 높이를 계산하여 이미지 및 비디오가 늘어나거나 왜곡되지 않도록합니다.

예를 들어, 1920 x 1080과 3840 x 2160은 동일한 16:9 화면 비율을 공유합니다. 그들은 해상도만 다릅니다. 이 차이를 이해하는 것은 디지털 미디어에서 일하는 모든 사람에게 중요합니다. 왜냐하면 크기를 변경하는 동안 화면 비율을 유지하는 것은 " squishing "또는 "stretching"로 알려진 시각적 왜곡을 방지하기 때문입니다.

화면 비율은 일상 생활에서 어디에서나 나타납니다. 스마트 폰 화면, 노트북 디스플레이, 소셜 미디어에 게시하는 사진, 스트리밍하는 비디오, 인쇄하는 종이 크기까지 나타납니다. 예를 들어 A4 종이 표준은 √2:1 비율 (약 1.414:1) 을 사용하므로 동일한 비율을 유지하면서 시트를 절반으로 접을 수 있습니다.

일반 면 비율 과 그 사용

각 산업에 따라 각기 다른 비율이 사용된다. 아래 표는 가장 널리 사용되는 비율과 그 일반적인 응용 분야를 다루고 있으므로 프로젝트에 적합한 비율을 신속하게 식별할 수 있습니다.

영화 산업은 표준 TV 형식을 넘어 여러 가지 전문적인 화면 비율을 사용합니다. 아카데미 비율 (1.375:1) 은 초기 영화를 지배했으며, 현대 블록버스터는 일반적으로 1.85: 1 (평면 와이드 스크린) 또는 2.39: 1 (아나모르픽 범위) 를 사용합니다. IMAX는 1.43: 1을 사용하며, 이는 표준 와이드 스크린보다 훨씬 높습니다. 이것이 IMAX 장면이 몰입감을 느끼는 이유입니다.

화면 비율 을 유지 하면서도 크기 를 변경 하는 방법

이미지 또는 비디오 프레임의 크기를 변경하면서도 화면 비율을 유지하려면 한 차원을 고정하고 다른 차원을 비례적으로 계산해야합니다. 공식은 간단합니다.

• 알려진 새로운 너비, 높이 해결:새로운 높이 = (원래 높이 x 새로운 너비) ÷ 원래 너비
• 알려진 새로운 높이, 너비 해결:새로운 너비 = (원래 너비 x 새로운 높이) ÷ 원래 높이

예제 1:1920 x 1080 이미지의 크기를 1280 픽셀로 변경합니다.
새로운 높이 = (1080 x 1280) ÷ 1920 =720결과: 1280 x 720 (아직 16:9).

예 2:1200 픽셀 폭의 열에 맞게 4000 x 3000 사진 (4: 3) 의 크기를 변경합니다.
새로운 높이 = (3000 x 1200) ÷ 4000 =900결과: 1200 x 900 (아직 4:3).

예제 3:2560 x 1440 소스를 기반으로 600 픽셀 높이의 배너가 필요합니다.
새로운 너비 = (2560 x 600) ÷ 1440 =1067년결과: 1067 x 600 (아직 16:9).

대부분의 이미지 편집 소프트웨어 (Photoshop, GIMP, Figma, Canva) 는 "락 화면 비율" 또는 "제한 비율" toggle를 포함합니다. 활성화되면 한 차원을 변경하면 다른 차원이 자동으로 조정됩니다. 그러나 편집기를 열기 전에 차원을 계산해야하거나 CSS, 반응형 이미지 또는 비디오 인코딩 설정을 사용하여 작업하는 경우 이 계산기는 정확한 값을 즉시 제공합니다.

웹 디자인 및 CSS의 양자 비율

현대 웹 개발은 반응형 레이아웃을 위해 양자 비율에 크게 의존합니다.aspect-ratioproperty (2021 이후 모든 현대 브라우저에서 지원) 를 사용하면 상자의 비율을 직접 정의할 수 있습니다.

.video-container { aspect-ratio: 16 / 9; width: 100%; }

이것은 뷰포트 너비와 상관없이 항상 16:9 비율을 유지하는 반응형 컨테이너를 생성합니다. 더 이상 패딩-바닥 해킹이 없습니다. 일반적인 사용 사례는 다음과 같습니다:

• 임베디드 비디오:유튜브와 비미오의 임베드는 16:9 컨테이너가 필요합니다.
• 이미지 플레시홀더:이미지가 로드되기 전에 화면 비율을 설정하면 핵심 웹 비탈스 메트릭인 누적 레이아웃 시프트 (CLS) 를 방지할 수 있습니다.
• 카드 레이아웃:제품 카드와 소형 이미지는 그리드에서 동일한 화면 비율을 공유할 때 일관되게 보입니다.
• 영웅 섹션:전체 너비의 배너는 종종 3:1 또는 4:1과 같은 비율을 사용하여 다양한 화면 크기의 시각적 균형을 유지합니다.

HTML<img>이 요소는 또한width그리고height이 속성을 항상 설정하세요. 브라우저는 이미지가 도착하기 전에 올바른 공간을 예약하기 위해 이 속성을 사용합니다.

소셜 미디어의 화면 비율

각 소셜 미디어 플랫폼은 다양한 유형의 콘텐츠에 대해 권장되는 양자 비율을 가지고 있습니다. 잘못된 비율을 사용하면 콘텐츠가 자르고, 편지 상자에 넣거나 품질을 잃게됩니다. 여기 포괄적인 참조가 있습니다.

최대 참여를 위해 항상 플랫폼의 권장 비율과 해상도로 콘텐츠를 생성하십시오. 더 높은 해상도 파일 (예: YouTube의 4K) 을 업로드하면 플랫폼이 모바일 사용자를 위해 자동으로 축소하면서 큰 화면에서 시청자에게 최고의 품질을 제공 할 수 있습니다.

화면 비율 계산 의 수학

단순화 된 면 비율을 계산하려면가장 큰 공통분모 (GCD)GCD는 유클리드 알고리즘을 사용하여 계산됩니다. 수학에서 가장 오래된 알고리즘 중 하나인 기원전 300년으로 거슬러 올라갑니다.

1920 x 1080에 대한 단계별 예시:

• GCD ((1920, 1080): 1920 mod 1080 = 840
• GCD ((1080, 840)): 1080 mod 840 = 240
• GCD ((840, 240)): 840 mod 240 = 120
• GCD ((240, 120)): 240 mod 120 = 0 -> GCD = 120

나누기: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9 -> 비율 =16:9

1366 x 768 (매우 흔한 노트북 해상도) 와 같은 비표준 차원에서는 GCD는 2로 683:384입니다. 이는 깨끗한 비율로 단순화되지 않습니다. 실제로는 이 해상도는 16:9에 가깝습니다. 제조업체는 전체 픽셀로 둥글게 만듭니다. 그렇기 때문에 일부 "16:9" 화면은 약간 불완전한 비율을 가지고 있습니다.

그소수 비율16:9 = 1.778, 4:3 = 1.333, 21:9 = 2.333. 더 높은 소수점 은 더 넓은 직사각형 을 의미한다.

사진 및 인쇄 에서의 양자 비율

사진 화면 비율은 구성, 프레임, 그리고 이미지가 인쇄되거나 표시되는 방식에 영향을 미칩니다. 가장 일반적인 센서 및 인쇄 비율은 다음과 같습니다.

사진을 인쇄 할 때, 화면 비율 불일치로 인해 자작이 발생합니다. 8x10 " (즉 5:4) 로 인쇄 된 3:2 사진은 이미지의 일부를 잃게됩니다. 전문 사진 작가는 최종 출력 비율을 염두에 두고 작곡을 계획하거나 목적 형식에 맞게 포스트 프로덕션에서 더 넓게 촬영하고 자작합니다.

국제 종이 표준 (ISO 216) 은 독특한 √2:1 비율 (약 1.414:1) 을 사용합니다. 이것은 A4 시트를 절반으로 접으면 동일한 비율의 A5 시트를 생성한다는 것을 의미합니다. 다른 비율이 소유하지 않는 수학적으로 우아한 속성입니다. 인쇄를 위해 디자인 할 때, 시작하기 전에 디지털 캔버스가 목표 종이의 측면 비율과 일치하는지 항상 확인하십시오. 나중에 변경하면 전체 레이아웃을 다시 구성하는 것을 의미합니다.

이벤트 또는 초상화를 촬영하는 전문 사진작가는 종종 3:2 인카메라를 사용하지만 다른 출력에 맞게 여러 비율의 최종 이미지를 제공합니다. 4x6 프린트에는 3:2, 8x10 프린트에는 5:4, 슬라이드 쇼에는 16:9, 소셜 미디어 프로필 이미지에 대해서는 1:1입니다. 초반부터 여러 결과물을 계획하는 것은 피사체 주위에서 추가 공간을 남겨 두는 것으로 " 느슨한 촬영"이라고 불리며 상업 사진에서 최고의 관행입니다.