CSS를 사용하여 높이에 따른 Div 종횡비를 유지하는 방법은 무엇입니까?

CSS를 사용하여 높이에 따른 Div 가로세로 비율 유지

특정 시나리오에서는 요소의 너비가 퍼센트로 유지되도록 해야 할 수도 있습니다. 높이의 가변성과 관계없이 높이. 이를 위한 JavaScript 솔루션이 존재하지만 CSS는 우아한 접근 방식을 제공할 수도 있습니다.

이를 달성하려면 가로 세로 비율 속성을 활용하세요.

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}</code>

여기서 가로 세로 비율 속성이 실제로 사용되는 곳이 바로 여기입니다. Shines:

• 요소의 높이와 너비 사이에 고정된 관계를 설정합니다.
• 결과적으로 상자의 가로 세로 비율(이 경우 2:1)은 요소의 높이와 너비에 관계없이 유지됩니다. 창 높이가 변경됩니다.

이 솔루션을 사용하면 창 크기가 수직으로 조정되는 경우에도 요소 너비가 항상 높이의 50%가 됩니다.

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