종횡비 계산기: 너비와 높이를 처음으로 올바르게 가져옵니다

나는 한때 모바일의 모든 추천 이미지가 망글을 통과 한 것처럼 보이는 WordPress 테마를 발송했습니다. 얼굴이 늘어나고 로고가 짓 눌려졌습니다. 원인은 CSS 파일의 세 문자였습니다: a height: 240px 옆에 앉아 width: 100%니다. 대략 1.56:1 의 비율을 생산한 375 픽셀의 전화기에서, 그리고 이미지는 16:9 - 1.78:1 이었습니다. 종이에 큰 차이는 아닙니다. 인간의 얼굴에서 매우 명백합니다.

종횡비는 잘못되기에는 너무 단순하다고 느껴지는 것 중 하나이므로 아무도 다시 확인하지 않습니다. 단일 부문입니다. 그럼에도 불구하고 비디오 내보내기,잘못된 위치에서 잘리는 OpenGraph 미리보기,검은 막대가있는 축소판,27 인치 모니터에서는 괜찮아 보이고 전화에서는 끔찍한 영웅 이미지를 조용히 망칩니다. 수학은 사소한 것입니다; 반올림 실수의 비용은 그렇지 않습니다.

나는 짓는다 Toolz.dev 그리고 나는이 계산을 지속적으로 - plugin's 관리 화면을위한 이미지 크기 조정, Reels 형식 비디오 내보내기, OpenGraph 이미지가 실제로 무엇이어야하는지 작업하기 위해 그렇게 만들었습니다 종횡비 계산기 한 분야에서 그것을 하고 그것의 작용을 보여주기 위해서요. 그것에 비율과 한 차원을 주면,그것은 당신에게 다른 차원을 줍니다. 크기를 주면,그것은 그것을 비율로 줄이고 그 비율이 무엇이라고 불리는지 알려줍니다.

TL;DR: 종횡비는 가로 나누기 세로,콜론으로 두 숫자로 표기합니다. 빠진 높이를 찾으려면: width × (ratioHeight ÷ ratioWidth). 누락된 너비를 찾으려면: height × (ratioWidth ÷ ratioHeight). 크기에서 비율을 얻으려면 두 숫자를 최대 공약수로 나눕니다. 1920 과 1080 은 120 의 GCD 를 공유하며 16:9 를 제공합니다. The 종횡비 계산기 16:9, 9:16, 1:1, 4:3, 3:2, 21:9, 1.91:1 및 2.39:1에 대한 사전 설정이 포함된 세 가지 작업을 브라우저에서 모두 수행합니다.

종횡비란 무엇입니까?

종횡비는 image's 너비와 높이 사이의 비례 관계입니다. 콜론으로 구분된 두 개의 숫자로 쓰여집니다 - 16:9,4:3, 1:1 - 그리고 그것이 설명하는 것은 모양크기가 아닙니다.

그 구별은 전체 게임입니다. 1280 × 720,1920 × 1080 및 3840 × 2160 은 하나의 종횡비로 세 가지 다른 해상도입니다. 세 가지 크기에서 동일한 모양이므로 왜곡이나 자르기없이 다른 크기로 확장됩니다. 한편 1920 × 1080 및 1920 × 1200 은 너비가 거의 같고 높이가 120 픽셀만큼 다르며 근본적으로 다른 모양입니다. 하나는 16:9 이고 다른 하나는 16:10 이며 하나를 위해 설계된 콘텐츠를 다른 하나를 위해 제작 된 컨테이너에 넣는 것은 레터 박스 또는 작물을 의미합니다.

비율은 그냥 너비 ÷ 높이를 가장 낮은 용어로 분수로 나타낸 것입니다. 1920 ÷ 1080 = 1.777..., 그리고 분수 1920/1080 은 16/9 로 줄어듭니다. 둘 다 같은 사실이 두 가지 방법으로 진술되어 있습니다: 소수 형식은 비교하기가 더 쉽고 (1.78 이 1.5 보다 넓습니까? 분명히), 콜론 형식은 말하기 더 쉽습니다.

실제로 필요한 세 가지 계산

누락된 차원을 해결합니다

모양과 한면을 알고 있습니다. 이것은 실제로 가장 일반적인 경우입니다: & quot;16:9 이미지가 필요하고 컨테이너의 너비는 1280 픽셀입니다 - 얼마나 높습니까? & quot;

height = width × (ratioHeight ÷ ratioWidth)
       = 1280 × (9 ÷ 16)
       = 720

그리고 다른 방향으로:

width = height × (ratioWidth ÷ ratioHeight)
      = 1080 × (16 ÷ 9)
      = 1920

계산기에서 미리 설정된 값을 선택하거나 비율을 입력하고,알고 있는 차원을 채우고,다른 하나는 비워두고,계산을 누르십시오. 빈 필드를 채우고 그 아래에 산술을 보여줍니다.

크기를 비율로 줄입니다

당신은 크기가 있고 그 모양을 알고 싶어합니다. 일반적으로 두 자산이 일치하는지 확인하거나 client's 미스터리 차원 내보내기가 실제로 무엇인지 알아내기 위해 사용됩니다.

방법은 최대공약수입니다 두 차원을 균등하게 나누는 가장 큰 수를 구하고 둘 다 그것으로 나눕니다 1920 년과 1080 년의 경우 그 수는 120: 1920 ÷ 120 = 16,1080 ÷ 120 = 9 입니다 비율 16:9.

실제 크기는 종종 그렇기 때문에 답변이 흥미로워지는 곳입니다 아닙니다 마케팅 친화적인 비율로 축소. 3440 × 1440 울트라와이드 모니터는 43:18 로 감소합니다. 2560 × 1080 하나는 64:27 로 감소합니다. 둘 다 "21:9"로 판매되며,실제로 - 21:9 는 3360 × 1440 이 아닙니다. 레이블은 16:9 옆에 깔끔하게 들리는 소리로 소수 (≈2.39:1 및 ≈2.37:1) 를 반올림한 것입니다. 계산기는 진정한 감소 비율과 소수를 제공하므로 사양 시트가 아닌 현실에서 크기를 조정할 수 있습니다.

스케일링 및 피팅

같은 아이디어의 두 가지 변형. 스케일링 두 차원을 동일한 인수로 곱하면 정의에 따라 비율이 유지됩니다 - 1920 × 1080 의 50% 스케일은 960 × 540, 여전히 16:9 입니다. 피팅 왜곡 없이 경계 상자 안에 들어갈 때까지 소스 크기를 축소합니다: 더 작은 크기를 사용합니다 boxWidth ÷ sourceWidth 그리고 boxHeight ÷ sourceHeight 그리고 그것에 의해 스케일링합니다. 1200 × 1200 상자에 장착 된 4000 × 3000 사진은 1200 × 900 이됩니다. 이것이 바로 CSS 입니다 object-fit: contain 최대 크기 크기를 요청할 때 이미지 CDN이 수행하는 작업과 정확히 일치합니다.

종횡비 계산기의 주요 특징

실제로 사용되는 위치에 라벨이 붙은 10개의 사전 설정

표준 비디오 및 대부분의 디스플레이의 경우 16:9. 릴,쇼트, TikTok 및 스토리의 경우 9:16. 사각형 소셜 게시물 및 아바타의 경우 1:1. 이전 디스플레이 및 iPad 의 경우 4:3. DSLR 사진 및 35mm 필름의 경우 3:2. 인물 사진의 경우 2:3. 8×10 인쇄의 경우 5:4. 울트라 와이드의 경우 21:9. OpenGraph 링크-미리보기 이미지의 경우 1.91:1. 아나모픽 와이드 스크린의 경우 2.39:1. 프리셋을 호버링하면 Instagram 이 원하는 것을 기억하려고 할 때 숫자보다 더 중요한 용도가 무엇인지 알 수 있습니다.

모든 답 아래의 공식

결과 패널은 정확한 산술을 보여줍니다 - 1280 × (9 ÷ 16) = 720. 부분적으로는 검증할 수 있도록,부분적으로는 스프레드시트나 스크립트로 들어 올릴 수 있도록,차원을 CSS 파일이나 Tailwind 구성으로 하드 코딩하려는 경우 숫자가 어디에서 왔는지 확인할 수 있어야 합니다.

축소된 비율, 소수, 이름입니다

모든 결과는 세 가지 표현을 모두 보고합니다: 축소된 정수 비율(16:9), 소수 형식(1.778:1), 그리고 공통 이름이 있는 경우 소수는 비교 대상입니다; 이름은 디자인 개요에 입력하는 것입니다.

메가픽셀 및 총 픽셀 수

모든 결과에는 메가픽셀 단위의 픽셀 수가 포함됩니다. 이것은 이미지 크기를 조정할 때 실제로 메모리 사용과 파일 크기를 예측하는 숫자입니다. 4000 × 3000 사진은 12MP 이고,크기를 두 배로 늘리면 48MP 로 4 배가됩니다. 두 배가 아니라 반응형 이미지 세트를 생성하는 경우 해당 2 차 관계는 머릿속에 간직해야 할 것입니다. 크기 조정이 완료되면 이미지 크기 조정 그리고 이미지 압축 실제 작업을 수행, 브라우저에서.

라이브 도형 미리보기

방금 계산한 비율로 그려진 결과 패널의 직사각형입니다. 장식적으로 들리지만 그렇지 않습니다. 16:9를 의미했을 때 9:16을 입력한 것을 가장 빠르게 포착하는 방법은 넓은 상자를 예상했을 때 큰 상자를 보는 것입니다.

클라이언트 측, 오프라인, 가입 없음

브라우저에서 일반 자바스크립트 산술 아무 것도 아무데도 보내지지 않고, 아무 것도 기록되지 않으며, 페이지가 네트워크와 계속 떨어져서 작동합니다.

어떤 종횡비를 사용해야 하나요?

실용적인 두 가지 메모. 1200 × 630 OpenGraph 크기는 40:21 로 줄어들어 십진수 1.905 - 모든 사람들이 그렇게 부르는 1.91:1 에 충분히 가깝고 Facebook, LinkedIn 및 X 크기가 모두 깔끔하게 렌더링됩니다. 결과를 확인하십시오 그래프 미리보기 열기 잘못 자른 미리보기 이미지는 아무도 클릭하지 않는 링크에서 가장 눈에 띄는 버그이기 때문에 배송하기 전에 도구를 사용하세요. 그리고 4:5는 Instagram에서 특히 알 가치가 있습니다: 피드에서 1:1보다 더 많은 수직 공간을 차지하므로 자유로운 주의가 필요합니다.

일반적인 사용 사례

왜곡 없이 반응형 이미지의 크기 조정

당신은 카드 그리드를 구축하고 있으며 디자인은 384 픽셀의 컨테이너 너비에서 16:9 썸네일을 요구합니다. 계산: 384 × 9 ÷ 16 = 216. 이제 두 CSS 모두에 대한 구체적인 크기가 있습니다 aspect-ratio: 16 / 9 선언과 이미지 내보내기,그리고 그들은 서로 동의합니다. 현대 CSS 는 예전보다 이것을 쉽게 - aspect-ratio CSS에서는 비율을 직접 가져와 브라우저가 산술을 수행하도록 합니다. 하지만 여전히 자산 자체에 대한 픽셀 크기가 필요합니다.

특정 플랫폼에 대한 비디오 내보내기

16:9 로 촬영했고 9:16 세로 컷이 필요합니다. 높이는 1920 에 머물러 있으므로 너비는 1920 × 9 ÷ 16 = 1080 입니다. 그것이 수출 크기입니다 - 그리고 숫자가 친숙해 보이는 이유는 1080 × 1920 이 단순히 1920 × 1080 으로 축을 바꾼 것인데,이것이 "vertical video"을 의미합니다.

계산기가 당신을 위해하지 않을 한 가지: H.264 는 짝수 차원을 필요로합니다. 수학이 홀수에 떨어지면 홀수면을 한 픽셀 아래로 반올림하거나 인코더가 작업을 거부합니다.

미스터리 자산이 실제로 무엇인지 알아내는 것입니다

클라이언트는 1440 × 1800 에서 자산을 보내고 홈페이지에서 잘못 자르는 이유를 묻습니다. 줄이다: 1440 및 1800 의 GCD 는 360 으로 4:5 를 제공합니다. 홈페이지 슬롯은 16:9 입니다. 그 두 모양은 모두 자르지 않고 만족할 수 없습니다 - 이제 뭔가 꺼져 있다는 막연한 느낌보다는 구체적인 대답과 결정을 내릴 수 있습니다.

일련의 자산이 일관성이 있는지 확인합니다

출시 전에 모든 영웅 image's 차원을 비율 모드를 통해 실행합니다. 30 개 중 하나가 1.6:1 로 돌아오고 나머지는 1.778:1 이면 라이브 사이트에서 미묘하게 잘못 보일 자산을 찾은 것이며 사용자가 발견하기 전에 발견했습니다.

알 가치가 있는 기술 노트

반올림. 대부분의 비율 계산은 전체 픽셀에 착륙하지 않습니다. 1000 의 너비에서 16:9 는 562.5 의 높이를 제공합니다. 계산기는 가장 가까운 전체 픽셀로 반올림되므로 563 - 1.7778:1 이 아닌 1.7762:1 인 모양,1 퍼센트의 약 10 분의 1 의 차이,보이지 않는 모양을 쫓지 마십시오. 지속적으로 반올림하는 것을 주목하십시오 아래로 요소를 쌓는 경우 이미지 세트 전체에 눈에 보이는 드리프트가 누적될 수 있습니다; 이전 결과가 아닌 매번 소스 차원에서 반올림됩니다.

화소 종횡비 vs 전시 종횡비. 방송 비디오에서 이들은 다를 수 있습니다: 오래된 DV 영상은 720 × 480 픽셀을 저장했지만 각 픽셀을 정사각형이 아닌 것으로 만들어 4:3 으로 표시했습니다. 오늘날 터치하는 거의 모든 것이이 작업을 수행합니다 - 모든 것이 정사각형 픽셀입니다 - 그러나 레거시 영상으로 작업하고 수학이 합산을 거부한다면 이것이 이유입니다.

aspect-ratio CSS 에서. 2021년부터 글을 쓸 수 있습니다 aspect-ratio: 16 / 9 그리고 한 차원이 유동적일 때 브라우저가 모양을 유지하게 하세요. 사용하세요. 예전에는 필요했던 패딩-탑-퍼센트 해킹의 전체 클래스를 제거하고,테스트해본 적이 없는 너비에서 레이아웃이 올바르게 유지된다는 것을 의미합니다. 여전히 자산 내보내기를 위한 계산기를 원합니다. 이미지 파일은 실제 픽셀 수여야 하기 때문입니다.

자르기는 스케일링이 아닙니다. 소스와 대상 비율이 다를 경우,그들 사이에서 크기를 조정할 수 없습니다 - 자르기,레터박스 또는 왜곡해야 합니다. 의도적으로 선택하십시오. object-fit: cover 작물 (그리고 일반적으로 사진에 원하는 것입니다), contain 편지함(보통 로고에 원하는 것) 및 fill 왜곡합니다(원하는 것이 거의 없으며 이 기사 상단에 있는 내 망가진 얼굴 버그의 원인).

자주 묻는 질문

너비와 높이에서 가로 세로 비율을 어떻게 계산합니까?

두 숫자를 최대 공약수로 나눕니다. 1920 × 1080의 경우 GCD는 120이므로 비율은 16:9로 감소합니다. 이 계산기를 전환하여 비율 모드를 얻고 두 차원을 모두 입력하면 축소 및 비율을 지정합니다.

1280픽셀 너비의 16:9 이미지에 필요한 높이는 얼마입니까?

너비에 9를 곱하고 16으로 나눕니다. 1280 × 9 ÷ 16 = 720. 따라서 16:9 이미지 1280픽셀 너비는 720픽셀입니다. 16:9 사전 설정과 1280의 너비를 입력하여 확인합니다.

종횡비와 해상도의 차이점은 무엇입니까?

종횡비는 모양 - 너비와 높이의 비율입니다. 해상도는 실제 픽셀 수입니다. 1280 × 720 및 1920 × 1080 은 동일한 16:9 종횡비로 서로 다른 해상도이므로 왜곡이나 자르기없이 한 쪽이 다른 쪽을 확장합니다.

소셜 미디어에는 어떤 종횡비를 사용해야 합니까?

Instagram 피드 게시물의 경우 1:1 또는 4:5, 릴, 스토리, TikTok 및 YouTube 반바지의 경우 9:16, 표준 YouTube 동영상의 경우 16:9, 1.91:1을 사용하십시오 그래프 열기 facebook, LinkedIn 및 X의 링크 미리보기 이미지. 이 도구의 사전 설정에는 이러한 모든 것이 포함되어 있습니다.

크기가 조정된 이미지가 늘어난 이유는 무엇입니까?

새로운 너비와 높이가 원래 비율과 일치하지 않으므로 이미지가 한 축을 따라 찌그러집니다. 손으로 두 숫자를 입력하는 대신 원래 비율을 사용하여 대상 너비에서 대상 높이를 계산하십시오 - 그것이 바로 solve-for-missing-side 모드의 목적입니다.

21:9은 실제로 무엇을 의미합니까?

초광각 디스플레이를 위한 마케팅 라벨입니다. 3440 × 1440 모니터의 실제 비율은 43:18,대략 2,39: 1 이며,2560 × 1080 패널은 64:27 입니다. 둘 다 "21:9" 제품 목록에서 반올림됩니다. 정확한 픽셀 치수가 필요한 경우 라벨이 아닌 실제 패널 해상도에서 계산하십시오.

결과가 정수가 아닐 때 가로 세로 비율을 유지하려면 어떻게 해야 합니까?

계산기는 가장 가까운 전체 픽셀로 반올림되어 최대 반 픽셀의 드리프트를 도입합니다 - 실제로는 보이지 않습니다. 비디오 인코더는 더 엄격합니다: H.264 는 짝수 치수를 요구하므로 인코더가 크기를 거부하면 홀수면을 한 픽셀 아래로 반올림합니다.

이 계산기는 오프라인에서 작동합니까?

네. 모든 계산은 브라우저에서 실행되는 일반 JavaScript 산술입니다. 차원이 서버로 전송되지 않고, 아무것도 기록되지 않으며, 페이지가 로드된 후에도 인터넷 연결 없이 도구가 계속 작동합니다.

관련 도구

• 이미지 크기 조정- 방금 계산한 치수를 브라우저에 적용하세요
• 이미지 압축- 모양이 맞으면 파일을 축소합니다
• 백분율 계산기- 작업의 절반 단위로
• 그래프 미리보기 열기- 링크를 배송하기 전에 1.91:1 이미지를 확인하세요
• 포맷 변환기- 웹P 그리고 방금 크기를 조정한 자산에 대한 AVIF입니다

추가 읽기: 이미지 압축에 대한 전체 가이드 그리고 웹용 필수 이미지 도구.