Comment puis-je conserver les proportions lors du redimensionnement réactif d'une division avec CSS ?

Modifier de manière réactive les dimensions des divisions tout en préservant le rapport hauteur/largeur

Lorsque vous travaillez avec des images, l'application d'une valeur en pourcentage à leur largeur ou hauteur conserve leur rapport hauteur/largeur. à mesure qu'ils s'agrandissent ou se rétrécissent. Cependant, reproduire ce comportement avec d'autres éléments peut être difficile.

Heureusement, CSS propose une solution pour lier la largeur et la hauteur d'un élément à l'aide de pourcentages, garantissant ainsi que ses proportions restent cohérentes.

Solution utilisant CSS

Cela peut être réalisé grâce au fait surprenant que la valeur en pourcentage de la propriété padding-top est relative à celle du bloc conteneur. largeur. Considérez l'extrait CSS suivant :

.wrapper {
  width: 50%;
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

Exemple HTML :

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

Dans cet exemple, le div ".wrapper" définit la largeur à 50 % ( ou tout pourcentage souhaité) et crée un contexte relatif pour le div interne ".main".

Le ".wrapper:after" le pseudo-élément utilise la propriété padding-top pour établir un taux de remplissage de 56,25 %. Ce rapport représente un rapport hauteur/largeur de 16:9, garantissant que le div ".main" conserve toujours ce rapport hauteur/largeur.

Enfin, le div ".main" remplit tout le conteneur ".wrapper" tout en préservant son aspect. ratio et mettant en valeur son fond bleu ciel profond et son texte blanc.

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!