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

반응형 정사각형 모양의 Div 만들기

질문:

CSS에서 div 요소를 어떻게 디자인할 수 있습니까? 상위 요소의 크기가 조정될 때 너비에 비례하여 높이를 조정하여 정사각형 종횡비를 유지하시겠습니까?

답변:

패딩을 사용하여 이를 달성하는 간단한 기술이 있습니다.

1. div의 높이를 0으로 설정합니다. 이는 브라우저를 "속여" 높이를 유연하게 만듭니다.
2. div의 너비를 백분율로 정의합니다.
3. padding-bottom을 너비와 동일한 비율로 설정합니다. 이렇게 하면 브라우저가 정사각형 종횡비를 유지하기 위해 높이를 조정하게 됩니다.

다음은 코드 샘플입니다.

<div>

가장 바깥쪽 div는 정사각형 모양을 설정하고 내부 div는 사각형 모양을 설정합니다. 실제 내용이 포함되어 있습니다. 이 접근 방식은 상위 요소의 너비가 변경될 때 정사각형 종횡비를 효과적으로 유지합니다. 대부분의 브라우저와 호환됩니다.

실시간 예제는 jsfiddle에서 찾을 수 있습니다: [여기에 jsfiddle 링크 삽입]

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