다양한 창 크기에 맞게 자동 크기를 조정하는 동안 Div 요소의 종횡비를 어떻게 유지할 수 있습니까?

다양한 창 크기에서 자동 크기 조정 Div 요소의 종횡비 유지

웹 개발에서는 다음과 같은 중앙 div를 갖는 것이 바람직한 경우가 많습니다. 창 크기의 변화에 ​​적응하면서 특정 종횡비를 유지합니다. 그러나 너비와 높이 조정 모두에 효과적으로 작동하는 솔루션을 찾는 것은 어려울 수 있습니다.

현재 접근 방식

제공된 CSS 및 HTML 코드는 고정된 크기. 창 크기가 작아지면 div는 줄어들지만 원래 가로 세로 비율을 유지하는 방식은 아닙니다.

가로 세로 비율 속성을 사용하는 솔루션

이 문제를 해결하려면 , 종횡비 속성을 활용할 수 있습니다. 이 속성은 이제 널리 지원되며 요소 크기에 대한 고정 비율을 지정할 수 있습니다.

<br>body {<br> height: 100vh;<br> margin: 0;<br> 디스플레이: 플렉스;<br> 정당화 콘텐츠: 센터;<br> 정렬 항목: 센터;<br> 배경: 회색;<br>}</p>
<p>.stage {<br> --r: 960 / 540;</p>
<p>가로세로 비율: var(--r);<br> 너비: min(90%, min(960px, 90vh*(var(--r))));</p>
<p>디스플레이: flex;<br> 정당화-내용: 센터;<br> 정렬 항목: 센터;</p>
<p>배경:</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/* this gradient is a proof that the ratio is maintained since the angle is fixed */
linear-gradient(30deg,red 50%,transparent 50%),
chocolate;

로그인 후 복사

}

1. 가로 세로 비율 계산: --r 변수는 원하는 크기(960/540)의 너비/높이로 계산된 가로 세로 비율을 저장합니다.
2. 가로 세로 비율 설정: 가로 세로 비율 속성은 가로 세로 비율을 계산된 값으로 설정합니다. 이렇게 하면 요소가 항상 해당 비율을 유지합니다.
3. 너비 계산: 너비 속성은 원래 너비, 사용 가능한 창 너비의 90%, 계산된 종횡비의 90vh 배입니다. 이 공식을 사용하면 가로세로 비율을 유지하면서 요소가 창에 맞게 축소됩니다.
4. Div 중심 및 스타일 지정: div는 flexbox를 사용하여 중앙에 배치되고 배경은 그라데이션으로 스타일 지정됩니다. 요소가 축소되는 경우에도 종횡비가 유지된다는 것을 보여줍니다.

이 솔루션은 div 요소가 너비와 높이 모두에서 다양한 창 크기에 적응하면서 종횡비를 유지하도록 효과적으로 보장합니다.

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