Comment conserver les proportions lors du redimensionnement automatique d'un élément Div ?

Comment conserver les proportions tout en redimensionnant automatiquement un élément Div

Créer un élément div qui ajuste automatiquement sa taille tout en conservant un rapport hauteur/largeur spécifique peut être un défi. L'objectif est de garantir que le div reste centré dans la fenêtre, en rétrécissant ou en s'agrandissant si nécessaire pour s'adapter à l'espace disponible sans déformer sa forme.

La clé pour y parvenir réside dans l'utilisation de propriétés CSS qui permettent le rapport hauteur/largeur. contrôle et dimensionnement adaptatif. La propriété aspect-ratio est un outil puissant introduit dans CSS3 qui permet aux développeurs de spécifier un rapport intrinsèque entre la hauteur et la largeur. Ce rapport sera maintenu quel que soit l'espace disponible.

En plus du rapport d'aspect, les propriétés min-width et min-height peuvent être utilisées pour établir les dimensions minimales du div. En combinant ces propriétés, nous pouvons créer un élément div qui respecte les proportions spécifiées tout en s'adaptant également à l'espace de fenêtre disponible.

Considérez le code CSS suivant :

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 , nous définissons une variable --r pour stocker le rapport de 960 à 540, représentant le rapport hauteur/largeur souhaité. La propriété aspect-ratio est ensuite utilisée pour maintenir ce rapport.

La propriété width est définie sur le minimum de 90 % de la largeur disponible, 960 px, ou sur la largeur calculée en fonction de la hauteur et du rapport hauteur/largeur disponibles. Cela garantit que le div conservera le rapport spécifié tout en s'ajustant dans la fenêtre.

Les propriétés min-width et min-height ne sont pas explicitement définies, mais leurs valeurs par défaut auto permettront au div de se réduire pour s'adapter des fenêtres plus petites tout en préservant les proportions.

La propriété d'affichage est définie sur flex pour permettre un alignement centré dans le div d'emballage, et les propriétés justifier-contenu et align-items sont utilisées pour centrer le contenu dans le div.

En conséquence, l'élément div de la scène sera automatiquement redimensionné tout en conservant ses proportions, garantissant qu'il reste centré et visuellement cohérent quelles que soient les dimensions de la fenêtre.

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!