전체 화면을 채우는 Div의 화면 비율을 16:9로 유지하는 방법은 무엇입니까?

화면 너비와 높이를 모두 채우면서 Div의 가로 세로 비율을 유지하는 방법

16:9와 같이 특정 가로 세로 비율로 웹사이트를 디자인할 때 비디오와 같은 디스플레이를 사용하려면 사용 가능한 화면 공간을 채우면서 이 비율을 유지하는 것이 필요합니다. 이 작업은 콘텐츠가 중앙에 있고 양쪽의 최대 크기를 초과하지 않도록 하는 데 어려움을 겪습니다.

CSS 뷰포트 단위 적용

실용적인 CSS 솔루션에는 뷰포트 단위인 vw(뷰포트 너비) 및 vh (뷰포트 높이). 이러한 단위를 사용하면 요소가 뷰포트 크기에 따라 크기를 조정할 수 있습니다. div의 너비를 100vw로 설정하면 전체 화면 너비에 맞게 확장됩니다. 16:9 화면 비율을 유지하기 위해 높이는 56.25vw(9/16 * 100vw로 계산)로 설정됩니다.

최대 크기 제한

요소가 넘치는 것을 방지하기 위해 다음을 사용하여 최대 높이 및 너비 제한이 적용됩니다.

최대 높이: 100vh 및 최대 너비: 177.78vh(16/9 * 100vh로 계산).

위치 지정 및 센터링

절대 위치 지정 및 설정

top, bottom, 왼쪽 그리고 오른쪽을 0으로 설정합니다. 이렇게 하면 div가 화면의 사용 가능한 공간 내 중앙에 유지됩니다.이러한 CSS 속성을 결합하면 16:9의 가로세로 비율을 유지하는 동시에 화면 비율을 유지하는 div를 만들 수 있습니다. 전체 화면 너비와 높이를 채웁니다. 이 솔루션은 반응성이 뛰어나고 JavaScript 없이도 주요 브라우저에서 일관되게 작동합니다.

위 내용은 전체 화면을 채우는 Div의 화면 비율을 16:9로 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!