CSS 가로세로비 계산기

가로세로비는 요소의 너비와 높이 사이의 비례 관계입니다. 16:9처럼 콜론으로 구분한 두 숫자로 쓰며, 두 치수를 같은 배율로 조정해도 비율은 그대로입니다. 웹 개발자는 이미지, 동영상, 임베드, 카드, 반응형 구성 요소가 모두 로드되기 전에 안정적인 공간을 확보하기 위해 비율을 사용합니다. 이 계산기는 정수 치수 쌍을 약분하고 이에 맞는 최신 CSS 선언을 만듭니다. 약분에는 너비와 높이의 최대공약수를 사용합니다. 1920 × 1080 의 최대공약수는 120 이므로 두 치수를 120 으로 나누면 16 × 9 가 됩니다. 소수값은 너비를 높이로 나눈 값으로, 16:9 는 약 1.7778 입니다. CSS aspect-ratio 속성에는 약분한 값이나 원래 치수를 모두 쓸 수 있지만, 약분한 값이 알아보고 검토하기 쉽습니다. 생성한 선언은 이미지 래퍼, 동영상 프레임, 그리드 항목 등 박스의 스타일 규칙에 붙여 넣을 수 있습니다. aspect-ratio 속성은 선호 비율을 제공합니다. 요소의 너비가 정해지고 높이가 자동이면 브라우저가 비율로 높이를 구합니다. 높이가 정해지고 너비가 자동이면 너비를 구할 수 있습니다. 두 치수가 명시적으로 고정되면 비율이 이를 덮어쓰지 않습니다. 콘텐츠, 최소·최대 크기, 박스 크기 계산 방식과 레이아웃 제약도 최종 렌더링 크기에 영향을 줍니다. width: 100% 와 가로세로비를 함께 쓰는 것은 반응형 미디어 컨테이너를 만드는 일반적인 방법입니다. 가로세로비와 해상도는 다릅니다. 1280 × 720 과 3840 × 2160 처럼 픽셀 수가 크게 다른 이미지도 모두 16:9 일 수 있습니다. 비율은 모양을, 해상도는 세부 표현, 파일 크기와 표시 밀도를 좌우합니다. 이미지를 새 비율로 자르면 내용이 사라지고, 다른 모양의 박스에 전부 맞추면 빈 공간이 생길 수 있습니다. CSS object-fit 의 cover 와 contain 같은 값은 확보한 박스 안에서 대체 콘텐츠를 표시하는 방식을 결정합니다. 레이아웃 이동을 막으려면 원본 리소스의 고유 치수를 사용하세요. HTML width 와 height 속성이 있으면 반응형 CSS 가 표시 크기를 바꿔도 브라우저가 비율을 추론할 수 있습니다. 구도에 따라 이미지를 바꾸거나 특수한 중단점을 사용할 때는 선택되는 원본마다 의도한 구도인지 확인하세요. 이 계산기는 비율만 중요하므로 동일한 어떤 단위도 사용할 수 있지만, 최대공약수 계산을 정확하게 하고 간결하고 예측 가능한 비율을 만들기 위해 정수 입력을 요구합니다.