Comment conserver les proportions dans les divisions à redimensionnement automatique ?

Maintenir les proportions dans les éléments Div à redimensionnement automatique

Énoncé du problème

Créer un div élément qui :

• Ajuste automatiquement sa taille pour s'adapter à l'espace d'écran disponible
• Conserve son rapport hauteur/largeur d'origine une fois redimensionné
• S'adapte aux dimensions de largeur et de hauteur spécifiées

Solution

En utilisant la propriété de rapport d'aspect, vous pouvez obtenir le comportement souhaité :

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: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

Explication

• aspect-ratio: var(--r): Définit le rapport hauteur/largeur souhaité (960px : 540px)

• width: Calcule la largeur en fonction du plus petit des éléments suivants :

  • 90 % de la largeur de la fenêtre disponible
  • 960px
  • 90 % de la hauteur de la fenêtre multipliée par l'aspect ratio
• Arrière-plan dégradé linéaire : Démontre comment le motif d'arrière-plan conserve ses proportions lors du redimensionnement.

Cette solution vous permet de créer un div qui se redimensionne automatiquement, en conservant son rapport hauteur/largeur d'origine, dans les dimensions maximales spécifiées.

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!