Maintenir le rapport d'aspect dans les éléments div résidant automatique

Lors de la création d'un élément div résidante qui reste centré sur l'écran, il est important de s'assurer que son rapport d'aspect est maintenu, indépendamment des changements de la taille de la fenêtre. Cela peut être réalisé en utilisant les techniques CSS.

Solution CSS:

La propriété Aspect-Ratio fournit une solution simple pour maintenir le rapport d'aspect dans la redimensionnement des éléments div. Le code CSS suivant démontre comment y parvenir:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;  // Define the desired aspect ratio (width / height)

  aspect-ratio: var(--r);  // Set the aspect ratio
  width:min(90%, min(960px, 90vh*(var(--r))));  // Set the maximum width and height while preserving ratio

  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(30deg,red 50%,transparent 50%),  // Add a gradient to visualize the preserved aspect ratio
    chocolate;
}

Explication:

• La propriété d'aspect ratio établit le rapport d'aspect souhaité pour l'élément, qui est calculé en fonction de la largeur initiale et des valeurs de hauteur (960px et 540px, respectivement). Les contraintes spécifiées:

• un maximum de 90% de la largeur disponible

  un maximum de 960px
  une largeur qui maintient le rapport d'aspect par rapport à la hauteur disponible (90vh multiplié par var (- r)) Le gradient est ajouté pour démontrer visuellement que le rapport d'aspect est maintenu, car l'angle du gradient reste constant indépendamment des modifications des dimensions de l'élément. Cette solution fonctionne efficacement pour redimensionner la largeur et la hauteur de l'élément.