CSS 비율 조절

이 도구는 너비:높이 종횡비에 대한 CSS를 생성하며 최신 `aspect-ratio` 속성 또는 클래식 백분율 padding hack 중 하나를 사용합니다. 일반적인 비율 프리셋, 사용자 지정 너비/높이 입력(1-100), 라이브 미리보기 상자 및 복사 가능한 출력을 제공합니다. 미리보기는 선택한 방식에 따라 렌더링을 조정하므로 각 기술이 무엇을 생성하는지 정확히 확인할 수 있습니다.

1. Common Ratio 프리셋(16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) 중 하나를 클릭하거나 사용자 지정 Width와 Height(1-100)를 입력하세요. 2. Method를 선택하세요: Modern(`aspect-ratio`) 또는 Padding Hack. 3. Preview 상자가 선택한 기술로 비율을 렌더링합니다. 4. Output 카드에서 Copy를 클릭하여 생성된 CSS를 복사하세요.

Modern은 한 줄을 출력합니다: `aspect-ratio: <width> / <height>;`. Padding Hack은 `position: relative; width: 100%; padding-top: <height/width*100>%;`를 가진 `.container`와 그것을 채우는 절대 위치 `.content`를 출력합니다. 이는 `aspect-ratio`를 지원하지 않는 환경을 위한 레거시 기술입니다. 미리보기는 동일한 스타일을 사용하며 최대 너비가 400px로 제한되므로 시각적 결과는 CSS가 설명하는 기술과 일치합니다.