크기 조정이 가능한 중앙 Div 요소에서 종횡비를 어떻게 유지합니까?

자동 크기 조정 Div 요소에서 가로 세로 비율 유지

화면 중앙에 유지되는 크기 조정 가능한 div 요소를 생성할 때 다음 사항을 확인하는 것이 중요합니다. 창 크기의 변화에 ​​관계없이 종횡비가 유지됩니다. 이는 CSS 기술을 사용하여 달성할 수 있습니다.

CSS 솔루션:

aspect-ratio 속성은 div 요소의 크기를 조정할 때 가로세로 비율을 유지하는 간단한 솔루션을 제공합니다. 다음 CSS 코드는 이를 달성하는 방법을 보여줍니다.

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

.stage {
  --r: 960 / 540;  // Define the desired aspect ratio (width / height)

  aspect-ratio: var(--r);  // Set the aspect ratio
  width:min(90%, min(960px, 90vh*(var(--r))));  // Set the maximum width and height while preserving ratio

  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(30deg,red 50%,transparent 50%),  // Add a gradient to visualize the preserved aspect ratio
    chocolate;
}

설명:

• aspect-ratio 속성은 요소에 대해 원하는 가로세로 비율을 설정합니다. 이는 초기 너비 및 높이 값(960px 및 540px, 각각).

• width 속성은 요소의 너비가 지정된 제약 조건 내에서 유지되도록 보장합니다.

  • 사용 가능한 너비의 최대 90%
  • 최대 960px
  • 사용 가능한 높이에 맞춰 가로 세로 비율을 유지하는 너비(90vh) 곱하기 var(--r))
• 요소의 변화에 ​​관계없이 그라데이션 각도가 일정하게 유지되므로 가로 세로 비율이 유지되는 것을 시각적으로 보여주기 위해 배경 그라데이션이 추가됩니다. 차원.

결과:

위 CSS 코드 결과 화면 중앙에 유지되고 원하는 가로 세로 비율을 유지하며 사용 가능한 창 공간에 맞게 크기가 조정되는 div 요소에서 이 솔루션은 요소의 너비와 높이 크기를 조정하는 데 효과적입니다.

위 내용은 크기 조정이 가능한 중앙 Div 요소에서 종횡비를 어떻게 유지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!