너비와 높이를 기준으로 Div의 종횡비를 유지하는 방법은 무엇입니까?

너비와 높이에 따른 종횡비 유지

뷰포트 내에 중앙 정사각형 div를 배치하려고 할 때 다음과 같은 의문이 생깁니다. 종횡비를 어떻게 효과적으로 유지할 수 있습니까? 너비와 높이 크기를 모두 고려한다면?

2022년 CSS 종횡비 속성의 출현은 이 문제에 대한 포괄적인 솔루션을 제공합니다. 이 속성을 사용하면 개발자가 뷰포트 크기 또는 상위 요소를 기준으로 가로세로 비율을 유지할 수 있습니다.

뷰포트 크기를 기준으로 가로세로 비율을 유지하려는 목표를 달성하려면 다음 CSS 코드를 사용할 수 있습니다.

<code class="css">.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;
}</code>

이 코드 조각은 각각 1:1과 1:19라는 두 가지 화면 비율을 보여줍니다. 이러한 종횡비를 활용하는 div 요소는 자동으로 크기를 조정하여 뷰포트 내에서 이러한 비율을 유지하므로 뷰포트 크기나 방향에 관계없이 일관된 시각적 모양을 보장합니다.

위 내용은 너비와 높이를 기준으로 Div의 종횡비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!