div의 높이와 너비를 비례적으로 조정하는 방법

이 기사에서는 주로 div의 높이와 너비를 비례적으로 조정하는 방법을 공유합니다. 이는 좋은 참조 값을 갖고 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.

1. 반응형으로 수행합니다. 특정 설정은 반응형으로 표시하려는 방식에 따라 다릅니다. 여기서 약간의 트릭을 사용해야 합니다. 패딩을 백분율로 측정할 때 컨테이너의 너비를 기준으로 계산되므로 높이를 0으로 설정하면 콘텐츠가 자연스럽게 오버플로됩니다.

패딩 바닥을 설정합니다.

height: 0;
width:50%;
padding-bottom:30%
그러면 이 div의 가로 세로 비율은 30%:50%

@media only screen and (min-width: 100px) and (max-width: 640px) {
     div{width: 100px;
 height: 100px;
         }}@media only screen and (min-width: 641px) and (max-width: 789px) {
      div{width: 200px;
 height: 200px;
          }}

입니다.

위 내용은 div의 높이와 너비를 비례적으로 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!