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

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

문제:
div 요소 생성 화면의 너비와 높이를 초과하지 않고 전체 화면 너비와 높이를 채우는 고정된 종횡비를 사용합니다.

해결책:
CSS 뷰포트 단위 vw 및 vh를 활용하여 div의 크기를 설정합니다.

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

설명:

• 뷰포트 단위: vw 및 vh는 뷰포트 너비에 상대적인 단위를 측정합니다. 키와 키입니다.
• Aspect 비율: 높이는 너비의 56.25%로 설정되어 가로 세로 비율은 9:16으로 일정하게 유지됩니다.
• 최대 크기: 요소는 최대 크기를 사용하여 뷰포트 크기 내로 제한됩니다. -height 및 max-width.
• Centering: position 속성은 두 요소를 모두 가운데에 배치합니다. top:0을 사용하여 화면에서 수직 및 수평으로; 하단:0; 왼쪽:0; 오른쪽:0;.

결과:

div 요소는 기기의 방향이나 방향에 관계없이 화면 비율을 깨지 않고 사용 가능한 화면 공간을 채우기 위해 확장됩니다. 화면 크기.

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