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

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

요소의 비율을 유지하는 데 있어서 전통적인 솔루션은 다음을 사용하는 것입니다. 수직 패딩에 대한 백분율 값입니다. 그러나 수평 패딩으로 동일한 효과를 얻는 것은 그리 간단하지 않습니다. 이 기사에서는 높이에 따라 div 요소의 가로 세로 비율을 유지하는 CSS 기반 접근 방식을 살펴봅니다.

원하는 마크업 구조는 다음과 같습니다.

<div class="box">
  <div class="inner"></div>
</div>

가로 세로 비율을 유지하려면 , CSS 종횡비 속성을 활용할 수 있습니다.

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

종횡비 속성은 요소의 너비와 높이의 비율을 지정합니다. 이 경우 2:1 비율은 너비가 높이의 두 배가 됨을 나타냅니다.

상위 요소(상자)의 높이를 유동적인 값(예: 50%)으로 설정하고 높이를 조정하여 가로 세로 비율 속성을 사용하면 너비가 높이에 비례하여 확장되도록 할 수 있습니다.

효과를 보여주기 위해 다음 HTML 및 CSS 코드를 고려할 수 있습니다.

<code class="html"><div class="demo">
  <div class="box">
    <ul>
      <li>This box has fluid height of 50%</li>
      <li>It has an aspect ratio of 2:1</li>
      <li>Resize the container vertically (or horizontally)</li>
      <li>The box will maintain its aspect ratio</li>
      <li>The text content will not affect its width</li>
    </ul>
  </div>
</div></code>

<code class="css">.demo {
  width: 90vw;
  height: 90vh;
  overflow: auto;
  resize: both;
  outline: 1px solid #999;
}</code>

컨테이너(.demo)의 크기를 조정하면 상자(상자)가 2:1 가로세로 비율을 유지하면서 너비를 조정하는 것을 볼 수 있습니다. 이 솔루션은 순전히 CSS를 통해 요소의 원하는 비율을 유지하는 깔끔하고 효과적인 방법을 제공합니다.

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