Comment puis-je conserver les proportions dans un élément Div redimensionnable et centré ?

Conserver les proportions dans les éléments div à redimensionnement automatique

Lors de la création d'un élément div redimensionnable qui reste centré sur l'écran, il est important de s'assurer que son rapport hauteur/largeur est conservé, quels que soient les changements de taille de la fenêtre. Ceci peut être réalisé à l'aide de techniques CSS.

Solution CSS :

La propriété aspect-ratio fournit une solution simple pour maintenir les proportions lors du redimensionnement des éléments div. Le code CSS suivant 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é aspect-ratio établit le rapport hauteur/largeur souhaité pour l'élément, qui est calculée en fonction des valeurs initiales de largeur et de hauteur (960 px et 540 px, respectivement).

• La propriété width garantit que la largeur de l'élément reste dans les contraintes spécifiées :

  • Un maximum de 90 % de la largeur disponible
  • Un maximum de 960px
  • Une largeur qui maintient la rapport hauteur/largeur par rapport à la hauteur disponible (90vh multiplié par var(--r))
• Le dégradé d'arrière-plan est ajouté pour démontrer visuellement que le rapport hauteur/largeur est maintenu, car l'angle du dégradé reste constant quels que soient les changements dans les dimensions de l'élément.

Résultat :

Le code CSS ci-dessus donne un élément div qui reste centré sur l'écran, conserve le rapport hauteur/largeur souhaité et se redimensionne pour s'adapter à l'espace disponible de la fenêtre. Cette solution fonctionne efficacement pour redimensionner à la fois la largeur et la hauteur de l'élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!