Comment puis-je conserver les proportions dans les éléments Div à redimensionnement automatique à l'aide de CSS ?

Préserver les proportions dans les éléments Div à redimensionnement automatique

Les éléments Div peuvent être difficiles à styliser lorsqu'ils doivent s'adapter à différentes tailles d'écran tout en conservant un rapport hauteur/largeur spécifique. Ceci peut être réalisé en utilisant la propriété CSS aspect-ratio ainsi qu'une combinaison intuitive d'attributs de largeur et de hauteur.

Pour gérer avec élégance les changements de largeur et de hauteur, vous pouvez tirer parti du calcul du rapport hauteur/largeur --r = width / height . Voici comment l'implémenter en CSS :

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

.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width: min(90%, min(960px, 90vh * var(--r)));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: 
    linear-gradient(30deg, red 50%, transparent 50%),
    chocolate;
}

Dans cet exemple :

• --r est une variable CSS personnalisée qui stocke le rapport hauteur/largeur sous forme décimale.
• La propriété aspect-ratio définit le rapport hauteur/largeur calculé.
• La propriété width calcule la valeur minimale entre 90 % de l'espace disponible, 960 px, et 90 % de la hauteur de la fenêtre multipliée par le rapport hauteur/largeur. Cela garantit que la largeur reste proportionnelle à la hauteur.
• La hauteur est déterminée par la propriété de rapport d'aspect en conjonction avec la largeur calculée.

Une telle approche garantit que l'élément div se redimensionne automatiquement tout en conservant le rapport hauteur/largeur souhaité, s'adaptant aux variations de largeur et de hauteur.

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!