CSS만 사용하여 반응적으로 Div의 가로 세로 비율을 유지하려면 어떻게 해야 합니까?

대답은 '그렇다'입니다. 다음 예에서 볼 수 있듯이 순수 CSS의 강력한 기능을 활용하여 이 효과를 얻을 수 있습니다.

이 스니펫에서 ".wrapper" div는 너비와 함께 컨테이너 역할을 합니다. 50%로 설정합니다(원하는 크기로 조정할 수 있습니다). 핵심 측면은 ".wrapper:after" 의사 요소에 있습니다. 원하는 가로 세로 비율(이 경우 16:9)의 역수인 패딩 상단을 56.25%로 설정하면 컨테이너의 높이가 자동으로 조정되어 올바른 비율을 유지합니다.

" .main" div는 ".wrapper" 내에 절대적으로 위치하며 전체 영역을 채웁니다. 단색 배경색과 대비되는 텍스트를 사용하여 가시성을 높입니다.

이 기술을 활용하면 종횡비를 쉽게 유지하면서 다양한 기기와 화면 크기에 걸쳐 일관된 시각적 미학을 보장하는 반응형 div를 만들 수 있습니다.

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