자동 크기 조정 Div에서 종횡비를 유지하는 방법은 무엇입니까?

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

문제 설명

div 만들기 요소:

• 사용 가능한 화면 공간에 맞게 자동으로 크기 조정
• 크기 조정 시 원래 가로 세로 비율 유지
• 지정된 너비 및 높이 크기에 맞음

솔루션

종횡비 속성을 활용하면 원하는 동작을 얻을 수 있습니다.

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: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

설명

• 종횡비: var(--r): 원하는 종횡비를 정의합니다(960px : 540px)

• 너비: 다음 중 작은 값을 기준으로 너비를 계산합니다.

  • 사용 가능한 창 너비의 90%
  • 960px
  • 창 높이의 90%에 가로 세로를 곱한 값 ratio
• 선형 그라데이션 배경: 크기를 조정하는 동안 배경 패턴이 어떻게 가로 세로 비율을 유지하는지 보여줍니다.

이 솔루션을 사용하면 다음을 만들 수 있습니다. 지정된 최대 크기 내에서 원래 가로 세로 비율을 유지하면서 자동으로 크기가 조정되는 div입니다.

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