CSS를 사용하여 자동 크기 조정 Div 요소에서 종횡비를 어떻게 보존할 수 있습니까?

자동 크기 조정 Div 요소에서 종횡비 유지

Div 요소는 유지하면서 다양한 화면 크기에 맞춰야 할 때 스타일을 지정하기 어려울 수 있습니다. 특정 종횡비. 이는 너비 및 높이 속성의 직관적인 조합과 함께 가로 세로 비율 CSS 속성을 사용하여 달성할 수 있습니다.

너비와 높이 변경을 모두 원활하게 처리하려면 가로 세로 비율 계산 --r = 너비 / 높이를 활용할 수 있습니다. . CSS에서 구현하는 방법은 다음과 같습니다.

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width: min(90%, min(960px, 90vh * var(--r)));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: 
    linear-gradient(30deg, red 50%, transparent 50%),
    chocolate;
}

이 예에서:

• --r은 가로 세로 비율을 소수점으로 저장하는 사용자 정의 CSS 변수입니다.
• aspect-ratio 속성은 계산된 가로세로 비율을 설정합니다.
• width 속성은 90% 사이의 최소값을 계산합니다. 사용 가능한 공간, 960px, 뷰포트 높이의 90%에 종횡비를 곱합니다. 이렇게 하면 너비가 높이에 비례하여 유지됩니다.
• 높이는 계산된 너비와 함께 가로 세로 비율 속성에 의해 결정됩니다.

이러한 접근 방식은 div 요소가 너비와 높이 변화를 모두 수용하여 원하는 가로 세로 비율을 유지하면서 자동으로 크기가 조정됩니다.

위 내용은 CSS를 사용하여 자동 크기 조정 Div 요소에서 종횡비를 어떻게 보존할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!