CSS만 사용하여 Div의 종횡비를 반응적으로 유지하는 방법은 무엇입니까?

반응형 크기 조정으로 Div 종횡비를 유지하는 방법

CSS는 이미지가 백분율 기반 너비 또는 높이로 종횡비를 유지할 수 있도록 허용하지만 동일한 기술은 다른 요소에 직접 적용할 수 있는 것 같습니다. 그러나 순수 CSS를 사용하여 div의 가로 세로 비율을 유지하는 것이 가능합니다.

해결책:

상단 패딩 비율은 포함된 부분에 상대적이라는 사실을 활용하세요. 블록의 너비. 이를 중첩된 div 구조와 결합하면 가로세로 비율이 고정된 요소를 생성할 수 있습니다.

예:

.wrapper {
  width: 50%;
  display: inline-block;
  position: relative;
}

.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

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

이 예에서 .wrapper div의 너비는 50%입니다. 종횡비를 설정하기 위해 의사 요소(.wrapper:after)가 추가됩니다. 이 경우에는 16:9입니다. 중첩된 .main div는 전체 .wrapper div를 채워 .wrapper div의 크기가 조정될 때 콘텐츠가 지정된 가로 세로 비율을 유지하도록 합니다.

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