JavaScript 없이 가로 세로 비율을 어떻게 유지할 수 있나요?

비례적으로 조정된 너비로 가로 세로 비율 유지

JavaScript를 사용하지 않고 요소의 높이를 기준으로 가로 세로 비율을 유지하는 것은 어려울 수 있습니다. padding-left를 높이의 백분율로 사용하는 것을 고려할 수도 있지만 이 방법은 효과적이지 않습니다.

다음 마크업을 고려하세요.

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

목표는 그에 따라 상자의 가로 세로 비율을 유지하는 것입니다. 비율 마진에 따라 동적으로 변경되는 높이:

<code class="css">.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}</code>

다행히도 기본 CSS 솔루션인 가로 세로 비율 속성이 존재합니다. 이 속성을 사용하면 요소 너비와 높이의 비율을 설정할 수 있습니다.

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

이 예에서 상자의 유동 높이는 50%이고 가로 세로 비율은 2:1입니다. 컨테이너의 크기를 조정하면 상자의 가로 세로 비율이 유지되어 항상 균형 잡힌 균형을 유지합니다.

위 내용은 JavaScript 없이 가로 세로 비율을 어떻게 유지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!