높이를 기준으로 Div 가로 세로 비율 유지

요소 너비를 높이에 대한 백분율로 유지하는 것은 어려울 수 있습니다. padding-top에 백분율 값을 사용하면 반대 효과를 얻을 수 있지만 백분율로 padding-left는 높이가 아닌 개체의 너비에 따라 달라집니다.

이 문제를 해결하기 위해 CSS는 가로 세로 비율 속성을 도입합니다. 높이에 따라 일관된 종횡비를 유지하는 우아한 솔루션을 제공합니다. 다음 코드 조각은 사용법을 보여줍니다.

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

이 예에서 .box 요소의 유동 높이는 50%이고 가로 세로 비율은 2:1입니다. 컨테이너의 높이가 변경되면 상자의 높이와 너비가 그에 따라 조정되어 가로 세로 비율이 유지됩니다.

가로 세로 비율 속성은 텍스트 내용이나 컨테이너 크기에 관계없이 상자의 너비가 높이에 비례하여 유지되도록 합니다. . 이를 통해 복잡한 JavaScript 솔루션이 필요하지 않으며 종횡비 유지에 대한 깔끔하고 효율적인 CSS 전용 접근 방식을 제공합니다.