CSS를 사용하여 Div의 크기를 반응적으로 조정할 때 가로 세로 비율을 어떻게 유지합니까?

가로 세로 비율을 유지하면서 반응적으로 Div 크기 변경

이미지 작업 시 너비 또는 높이에 백분율 값을 적용하면 가로 세로 비율이 유지됩니다. 확장되거나 축소됨에 따라. 그러나 이 동작을 다른 요소와 함께 복제하는 것은 어려울 수 있습니다.

다행히도 CSS는 백분율을 사용하여 요소의 너비와 높이를 연결하여 가로 세로 비율을 일관되게 유지하는 솔루션을 제공합니다.

CSS를 사용한 솔루션

이는 padding-top 속성의 백분율 값이 포함 블록의 너비. 다음 CSS 조각을 고려하세요.

.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;
}

HTML 예:

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

이 예에서 ".wrapper" div는 너비를 50%( 또는 원하는 비율) 내부 ".main" div에 대한 상대 컨텍스트를 생성합니다.

".wrapper:after" 의사 요소는 padding-top 속성을 사용하여 56.25%의 패딩 비율을 설정합니다. 이 비율은 16:9 가로 세로 비율을 나타내므로 ".main" div가 항상 해당 가로 세로 비율을 유지합니다.

마지막으로 ".main" div는 가로 세로 비율을 유지하면서 전체 ".wrapper" 컨테이너를 채웁니다. 비율을 높이고 짙은 하늘색 배경과 흰색 텍스트를 보여줍니다.

위 내용은 CSS를 사용하여 Div의 크기를 반응적으로 조정할 때 가로 세로 비율을 어떻게 유지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!