높이와 너비가 동일한 반응형 정사각형 Div를 만드는 방법은 무엇입니까?

높이와 너비가 동일한 반응형 정사각형 Div

목표는 너비에 맞게 높이를 자동으로 조정하는 div 요소를 만드는 것입니다. 상위 요소의 크기에 관계없이. 이를 달성하기 위해 CSS에는 간단하고 효과적인 솔루션이 있습니다.

백분율 패딩 하단 사용:

div에 다음 CSS를 추가하세요.

height: 0;
width: 20%;
padding-bottom: 20%;
background-color: red;

작동 방법은 다음과 같습니다.

• 높이를 다음으로 설정합니다. 0, div가 처음에 축소됩니다.
• 백분율 너비를 지정합니다(예: 20%).
• padding-bottom을 너비와 동일한 백분율로 설정합니다. 이는 div의 높이를 결정합니다.
• 사각형이 보이도록 배경색이 추가됩니다.

선택적 중첩 Div:

콘텐츠 배치의 유연성을 높이려면 정사각형 div 내에 중첩된 div를 만드는 것이 좋습니다. 이를 통해 필요에 따라 콘텐츠를 중앙에 배치하거나 정렬할 수 있습니다.

<div>

위 내용은 높이와 너비가 동일한 반응형 정사각형 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!