Wie kann ich das Seitenverhältnis in einem Div-Element beibehalten und gleichzeitig die Größe für verschiedene Fenstergrößen automatisch ändern?

Beibehalten des Seitenverhältnisses für die automatische Größenänderung von Div-Elementen in unterschiedlichen Fenstergrößen

In der Webentwicklung ist es oft wünschenswert, ein zentrales Div zu haben, das behält ein bestimmtes Seitenverhältnis bei und passt sich gleichzeitig an Änderungen in der Fenstergröße an. Es kann jedoch eine Herausforderung sein, eine Lösung zu finden, die sowohl für Breiten- als auch für Höhenanpassungen effektiv funktioniert.

Aktueller Ansatz

Der bereitgestellte CSS- und HTML-Code erstellt eine zentrierte Div, die beibehalten wird eine feste Größe. Wenn die Fenstergröße kleiner wird, verkleinert sich das Div, jedoch nicht in einer Weise, die sein ursprüngliches Seitenverhältnis beibehält.

Lösung mit der Eigenschaft „aspect-ratio“

Um dieses Problem zu beheben können Sie die Eigenschaft „Seitenverhältnis“ nutzen. Diese Eigenschaft wird mittlerweile weitgehend unterstützt und ermöglicht die Angabe eines festen Verhältnisses für die Abmessungen eines Elements.

<br>body {<br> height: 100vh;<br> margin: 0;<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> Hintergrund: grau;<br>}</p>
<p>.stage {<br> --r: 960 / 540;</p>
<p>aspect-ratio: var(--r);<br> width: min(90%, min(960px, 90vh*(var(--r))));</p>
<p>Anzeige: flex;<br> justify-content: center;<br> align-items: center;</p>
<p>background:</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;