CSS에서 전체 화면을 채우는 동안 Div의 종횡비를 유지하는 방법은 무엇입니까?

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

화면 너비를 채우면서 div의 가로 세로 비율을 유지하려면 및 높이의 경우 CSS 뷰포트 단위 vw(뷰포트 너비) 및 vh(뷰포트 높이)를 활용할 수 있습니다. 이 접근 방식을 사용하면 비율을 깨거나 스크롤 막대를 만들지 않고도 요소가 항상 최대 뷰포트 크기를 채울 수 있습니다.

FIDDLE

순수 CSS

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 */
}

이 CSS는 div:

• 화면의 전체 너비와 높이(vw 및 vh 단위)를 포함하도록 확장됩니다.
• 16:9의 가로 세로 비율을 유지합니다(높이:너비 비율 56.25). vw:100vw).
• 최대 높이와 ​​너비를 설정하여 오버플로를 방지합니다.
• 사용 가능한 뷰포트 공간 내에서 div를 수직 및 수평 중앙에 배치합니다.

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