뷰포트에서 종횡비 보존 보장

웹 디자인에서는 가변 뷰포트 크기에 적응하면서 요소의 종횡비를 유지하는 것이 중요합니다. 이를 통해 다양한 화면 크기와 방향에서 일관성이 보장됩니다. 특히 정사각형 요소를 처리할 때 이러한 보존을 달성하려면 다음 CSS 접근 방식을 구현할 수 있습니다.

종횡비 속성 활용

2022년 기준으로 측면은 -ratio 속성은 요소의 종횡비를 제어하기 위한 강력한 솔루션을 제공합니다. 원하는 너비 대 높이 비율을 지정함으로써 이 속성은 지정된 비율을 유지하도록 요소의 크기를 조정합니다. 결정적으로 크기 적응은 뷰포트의 가장 작은 치수로 제한되어 가로 및 세로 방향 모두에 동적으로 조정해야 하는 요구 사항을 충족합니다.

구현 예

시연하려면 가로 세로 비율 속성의 기능에는 다음 코드를 사용할 수 있습니다:

Aspect ratio 1:1
Aspect ratio 1:19

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

이 예에서는 서로 다른 가로세로 비율(1:1 및 16:9)을 가진 두 개의 div가 생성됩니다. 종횡비 속성은 장치의 방향에 관계없이 이러한 div가 뷰포트 내에서 원하는 모양과 크기를 유지하도록 보장합니다. 또한 해당 크기는 뷰포트의 가장 작은 크기에 맞게 조정되어 사각형 모양이 유지됩니다.