CSS로 전체 화면을 채우는 동안 Div의 종횡비를 어떻게 유지할 수 있습니까?

CSS로 화면 너비와 높이를 채우는 동안 Div의 종횡비 유지

Div의 고정된 종횡비를 유지하면서 사용 가능한 화면 너비와 높이를 CSS로 채우는 방법 양쪽의 크기를 초과하는 것은 CSS에서 까다로운 작업이 될 수 있습니다. 이 문제를 해결하기 위해 우리는 새로운 뷰포트 단위인 vw와 vh를 활용하는 순수한 CSS 솔루션을 제시합니다.

vw와 vh를 사용하여 뷰포트 너비와 높이를 기준으로 div의 너비와 높이를 정의할 수 있습니다. . 이렇게 하면 div가 종횡비를 깨지 않고 항상 최대 공간을 차지하게 됩니다. div가 오버플로되는 것을 방지하기 위해 비율 값을 사용하여 최대 높이 및 최대 너비 제약 조건도 설정합니다.

div를 수직 및 수평 중앙에 배치하려면 position:absolute를 사용하고 상단에 배치합니다. 창의 하단, 왼쪽, 오른쪽 가장자리. 이렇게 하면 화면 크기에 관계없이 div가 중앙에 유지됩니다.

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

이 솔루션은 원하는 16:9 화면비를 유지하면서 다양한 화면 크기에 적응합니다. 창의 크기를 수직 또는 수평으로 조정하면 div가 그에 따라 조정되어 스크롤 막대나 왜곡 없이 최대 공간을 차지합니다.

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