CSS 솔루션 :

는 DIV 요소 조정의 종횡비를 유지하기위한 간단한 솔루션을 제공합니다. 다음 CSS 코드는 이것을 달성하는 방법을 보여줍니다 :

body { 높이 : 100VH; 여백 : 0; 디스플레이 : Flex; 정당화 컨텐츠 : 센터; 정렬 구조 : 센터; 배경 : 회색; } .Stage { ---- : 960 / 540; // 원하는 종횡비 정의 (너비 / 높이) 종횡비 : var (-r); // 종횡비를 설정합니다 너비 : 최소 (90%, min (960px, 90vh*(var (-r))); // 비율을 보존하는 동안 최대 너비와 높이를 설정 디스플레이 : Flex; 정당화 컨텐츠 : 센터; 정렬 구조 : 센터; 배경: Linear-Gradient (30deg, 빨간색 50%, 투명 50%), // 보존 된 종횡비를 시각화하기 위해 그라디언트 추가 초콜릿; }

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;
}

설명 :

• 요소에 대한 원하는 종횡비를 설정합니다. 이는 초기 너비와 높이 값을 기준으로 계산됩니다 (960px 및 540px)
  • 지정된 제약 조건 :
  사용 가능한 너비의 최대 90%
  최대 960px
가용 높이와 관련하여 종횡비를 유지하는 너비의 최대 90%입니다. 요소 차원의 변화에 ​​관계없이 그라디언트의 각도가 일정하게 유지되기 때문에 종횡비가 유지됨을 시각적으로 입증합니다. 이 솔루션은 요소의 너비와 높이를 모두 크기로 조정하는 데 효과적으로 작동합니다.