CSS를 사용하여 크기를 조정하는 동안 Div의 가로 세로 비율을 유지하는 방법은 무엇입니까?

종횡비를 유지하면서 Div 크기를 반응적으로 변경하는 방법

이미지 크기를 조정할 때 너비 또는 너비를 설정하여 종횡비를 유지하는 것이 쉽습니다. 높이를 백분율로 표시합니다. 그러나 이미지가 아닌 요소에 대해 동일한 효과를 얻는 것은 어려워 보일 수 있습니다. 크기 조정 중에 가로 세로 비율을 유지하기 위해 백분율을 사용하여 div의 너비와 높이를 연결할 수 있나요?

해결책

물론입니다! CSS는 이 문제에 대한 독창적인 솔루션을 제공합니다. 직관에 어긋나는 것처럼 보일 수도 있지만 패딩 상단 비율은 실제로 포함 블록의 너비와 관련이 있습니다. 이를 통해 지정된 너비를 기반으로 동적 높이를 생성할 수 있습니다.

다음 CSS 코드를 고려하세요.

.wrapper {
  width: 50%; /* Set the desired width */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%; /* 16:9 aspect ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

HTML에서 크기를 조정하려는 div를 다음과 같이 래핑합니다. "래퍼" 클래스:

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

이 CSS는 "래퍼" div 내에 의사 요소(::after)를 생성합니다. 패딩 상단을 래퍼 너비의 백분율로 설정하여 그 안에 있는 div의 가로 세로 비율을 효과적으로 수정합니다. 래퍼의 크기가 조정되면 의사 요소도 조정되어 포함된 div("main")가 항상 원하는 가로 세로 비율을 유지하도록 합니다.

위 내용은 CSS를 사용하여 크기를 조정하는 동안 Div의 가로 세로 비율을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!