Comment maintenir les proportions d'une division de manière réactive en utilisant uniquement CSS ?

Div réactif avec rapport d'aspect maintenu à l'aide de CSS

Lorsque vous essayez de conserver un rapport d'aspect tout en redimensionnant un div, vous pouvez tirer parti de la puissance de CSS sans recourir à JavaScript.

CSS vous permet de lier la hauteur et la largeur d'un élément à l'aide de pourcentages. Voici comment y parvenir :

.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;
}

Dans cet exemple, le div wrapper définit la largeur souhaitée (50%). Le pseudo-élément wrapper:after utilise un pourcentage de remplissage supérieur par rapport à la largeur du wrapper. La valeur 56,25 % correspond à un rapport hauteur/largeur de 16:9.

Le div principal remplit tout le div wrapper, en conservant le rapport hauteur/largeur spécifié par le pourcentage de remplissage supérieur sur le pseudo-élément wrapper:after.

En utilisant CSS, vous pouvez facilement conserver un rapport hauteur/largeur pour votre div tout en le redimensionnant de manière réactive, sans introduire JavaScript.

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!