Pure CSS를 사용하여 전체 브라우저 화면을 채우는 동안 Div의 가로 세로 비율을 어떻게 유지할 수 있습니까?

CSS 화면 너비와 높이를 채우는 동안 Div 가로세로 비율 유지

웹 디자인에서는 div 요소의 특정 가로세로 비율을 유지하는 동시에 두 요소를 모두 채워야 합니다. 화면의 너비와 높이가 발생할 수 있습니다. 이는 순수 CSS를 사용하여 크로스 브라우저 호환 솔루션을 추구할 때 독특한 과제를 제시합니다.

두 가지 일반적인 접근 방식:

1. 이미지 컨테이너: 원하는 종횡비의 이미지를 사용하여 컨테이너 div를 확장합니다. 그러나 이 방법은 다양한 브라우저에서 일관되지 않은 동작을 보일 수 있습니다.
2. 비례 하단 패딩: 하단 패딩을 너비에 비례하여 설정합니다. 불행하게도 이 기술은 높이를 무시하고 과도한 수직 스크롤을 초래합니다.

A Novel Lösung:

이러한 한계를 극복하기 위해 최근에는 새로운 접근 방식을 활용합니다. CSS 뷰포트 단위인 vw(뷰포트 너비) 및 vh(뷰포트 높이)가 도입되었습니다. 이러한 단위를 통합하면 사용 가능한 화면 공간에 따라 div의 크기를 동적으로 조정할 수 있습니다.

코드 조각:

div {
  width: 100vw;
  height: 56.25vw; /* 9/16 = .5625 aspect ratio */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 = 1.778 aspect ratio */
  margin: auto;
  position: absolute;
  top:0;bottom:0; /* vertical center */
  left:0;right:0; /* horizontal center */
}

주요 기능:

• div 너비가 100%로 설정되었습니다. 뷰포트 너비(vw)입니다.
• 높이는 가로 세로 비율(너비의 56.25%)을 기준으로 계산됩니다.
• 뷰포트가 계산된 높이보다 크면 max-height 속성은 100vh로 설정됩니다.
• 뷰포트가 계산된 너비보다 넓은 경우, max-width 속성은 1.778vw(가로세로 비율에서 파생됨)로 설정됩니다.
• 절대 위치 지정 및 자동 중심 여백을 통해 div가 중앙에 정렬되도록 합니다. viewport.

결론:

CSS 뷰포트 단위를 활용하면 div의 원하는 가로 세로 비율을 유지하는 크로스 브라우저 호환 솔루션을 얻을 수 있습니다. 사용 가능한 화면 공간을 수평 및 수직으로 원활하게 채웁니다. 이 접근 방식을 사용하면 복잡한 JavaScript 조작이 필요하지 않으며 반응형 웹 레이아웃을 위한 간단하면서도 효과적인 솔루션을 제공합니다.

위 내용은 Pure CSS를 사용하여 전체 브라우저 화면을 채우는 동안 Div의 가로 세로 비율을 어떻게 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!