Comment puis-je conserver les proportions d'un élément Div lors du redimensionnement automatique pour différentes tailles de fenêtre ?

Maintenir les proportions pour le redimensionnement automatique des éléments Div dans différentes tailles de fenêtre

Dans le développement Web, il est souvent souhaitable d'avoir un div central qui conserve un rapport hauteur / largeur spécifique tout en s'adaptant aux changements de taille de la fenêtre. Cependant, trouver une solution qui fonctionne efficacement pour les ajustements de largeur et de hauteur peut être difficile.

Approche actuelle

Le code CSS et HTML fourni crée un div centré qui maintient une taille fixe. Lorsque la taille de la fenêtre devient plus petite, le div rétrécit mais pas d'une manière qui préserve son rapport hauteur/largeur d'origine.

Solution utilisant la propriété aspect-ratio

Pour résoudre ce problème , vous pouvez utiliser la propriété de rapport d'aspect. Cette propriété est désormais largement prise en charge et vous permet de spécifier un rapport fixe pour les dimensions d'un élément.

<br>body {<br>hauteur : 100vh;<br>marge : 0;<br> display: flex;<br> justifier-content: center;<br> align-items: center;<br> fond : gris ;<br>}</p>
<p>.stage {<br> --r : 960 / 540 ;</p>
<p>aspect-rapport : var(--r);<br> largeur : min(90%, min(960px, 90vh*(var(--r))));</p>
<p>affichage : flex;<br> justifier-contenu : centre;<br> aligner les éléments : centre ;</p>
<p>arrière-plan :</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;