다양한 창 크기에 맞게 자동 크기를 조정하는 동안 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;