JavaScript에서 너비와 화면 비율(가로:세로)을 기반으로 높이 계산하기

문제

화면의 너비를 첫 번째 인수로, 화면 비율(가로:세로)을 두 번째 인수로 받아 처리하는 JavaScript 함수를 작성해야 합니다. 함수는 이 두 입력값을 바탕으로 화면의 높이를 계산하여 반환해야 합니다.

예시

다음은 해당 코드입니다 −

const ratio = '18:11';
const width = 2417;
const findHeight = (ratio = '', width = 1) => {
    const [w, h] = ratio
    .split(':')
    .map(Number);
    const height = (width * h) / w;
    return Math.round(height);
};
console.log(findHeight(ratio, width));

출력

다음은 콘솔 출력 결과입니다 −

1477

코드 설명

함수 내부에서는 먼저 ratio 문자열을 :(콜론) 기준으로 분리한 뒤, map(Number)를 사용해 각 값을 숫자로 변환합니다. 이렇게 얻은 가로(w)와 세로(h) 값에 비율 공식인 height = (width × h) / w를 적용하여 높이를 구합니다. 마지막으로 Math.round()를 통해 결과값을 반올림하여 정수 형태로 반환합니다.

예를 들어 너비가 2417px이고 비율이 18:11이라면, 높이는 (2417 × 11) ÷ 18 ≈ 1477px로 계산됩니다. 이 방식은 동영상 플레이어 크기 조정, 반응형 이미지 영역 계산 등 다양한 상황에서 유용하게 활용할 수 있습니다.