Div 요소의 크기를 자동 조정할 때 종횡비를 유지하는 방법은 무엇입니까?

Div 요소의 크기를 자동으로 조정하면서 종횡비를 유지하는 방법

특정 종횡비를 유지하면서 크기를 자동으로 조정하는 div 요소 만들기 도전이 될 수 있습니다. 목표는 div가 창 중앙에 유지되도록 하고 모양을 왜곡하지 않고 사용 가능한 공간에 맞게 필요에 따라 축소 또는 확장하는 것입니다.

이를 달성하는 열쇠는 가로 세로 비율을 허용하는 CSS 속성을 활용하는 것입니다. 제어 및 적응형 크기 조정. 종횡비 속성은 개발자가 높이와 너비 사이의 고유한 비율을 지정할 수 있도록 하는 CSS3에 도입된 강력한 도구입니다. 이 비율은 사용 가능한 공간에 관계없이 유지됩니다.

종횡비 외에도 min-width 및 min-height 속성을 사용하여 div의 최소 크기를 설정할 수 있습니다. 이러한 속성을 결합하면 지정된 가로세로 비율을 준수하는 동시에 사용 가능한 창 공간에도 맞추는 div 요소를 생성할 수 있습니다.

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

이 예에서는 , 원하는 종횡비를 나타내는 960에서 540의 비율을 저장하기 위해 --r 변수를 정의합니다. 그런 다음 가로 세로 비율 속성을 사용하여 이 비율을 유지합니다.

너비 속성은 사용 가능한 너비의 최소 90%인 960픽셀 또는 사용 가능한 높이와 가로 세로 비율을 기준으로 계산된 너비로 설정됩니다. 이렇게 하면 div가 창에 맞으면서 지정된 비율을 유지할 수 있습니다.

최소 너비 및 최소 높이 속성은 명시적으로 설정되지 않지만 기본값인 auto를 사용하면 div가 창에 맞게 축소될 수 있습니다. 가로세로 비율을 유지하면서 창 크기를 더 작게 만듭니다.

디스플레이 속성은 래핑 div 내에서 가운데 ​​정렬을 활성화하기 위해 flex로 설정되고 justify-content 및 align-items 속성은 창을 가운데 정렬하는 데 사용됩니다.

결과적으로 스테이지 div 요소는 가로 세로 비율을 유지하면서 자동으로 크기가 조정되므로 창 크기에 관계없이 중앙에 유지되고 시각적으로 일관성이 유지됩니다.

위 내용은 Div 요소의 크기를 자동 조정할 때 종횡비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!