CSS로 반응형 사각형 모양의 Div를 만드는 방법은 무엇입니까?

CSS를 사용하여 반응형 정사각형 모양의 Div를 만드는 방법은 무엇입니까?

이전에 질문한 이 질문은 div의 높이를 너비에 맞게 동적으로 변경하는 방법을 모색합니다. 너비는 백분율로 표시되므로 상위 요소의 너비가 감소함에 따라 div도 비례적으로 축소되어야 합니다.

이 문제를 해결하기 위해 CSS의 padding-bottom 속성을 사용할 수 있습니다. padding-bottom을 백분율로 설정하면 div의 높이와 너비 사이의 비율을 생성하여 동일하게 유지되도록 할 수 있습니다.

코드 예는 다음과 같습니다.

<div>

여기서 코드에서 외부 div는 너비: 20% 및 높이: 0을 사용하여 정사각형 모양을 설정합니다. 20%의 패딩 하단은 높이와 너비 사이의 비율을 설정하여 결과적으로 1:1 화면비. 내부 div에는 실제 콘텐츠가 포함됩니다.

또한 기능을 보여주기 위해 JavaScript Fiddle 데모가 제공됩니다: [Fiddle 링크]

위 내용은 CSS로 반응형 사각형 모양의 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!