Comment conserver les proportions d'une division lors du redimensionnement à l'aide de CSS ?

Comment modifier de manière réactive la taille d'une div en préservant le rapport d'aspect

Lors du redimensionnement d'images, il est facile de conserver leur rapport d'aspect en définissant soit leur largeur, soit hauteur en pourcentage. Cependant, obtenir le même effet pour des éléments autres que des images peut sembler difficile. Pouvons-nous lier la largeur et la hauteur d'un div à l'aide de pourcentages pour conserver les proportions lors du redimensionnement ?

Solution

Absolument ! CSS offre une solution ingénieuse à ce problème. Bien que cela puisse sembler contre-intuitif, les pourcentages de remplissage supérieurs se rapportent en réalité à la largeur du bloc conteneur. Cela nous permet de créer une hauteur dynamique basée sur la largeur spécifiée.

Considérez le code CSS suivant :

.wrapper {
  width: 50%; /* Set the desired width */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%; /* 16:9 aspect ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

Dans le HTML, nous envelopperons le div avec lequel nous voulons redimensionner une classe de "wrapper":

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

Ce CSS crée un pseudo-élément (::after) au sein du div "wrapper". En définissant son padding-top en pourcentage de la largeur du wrapper, nous fixons efficacement le rapport hauteur/largeur du div qu'il contient. Au fur et à mesure que le wrapper se redimensionne, le pseudo-élément fait de même, garantissant que le div (« principal ») contenu conserve toujours le rapport hauteur/largeur souhaité.

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!