Comment maintenir le rapport hauteur/largeur d'une division de manière réactive en utilisant uniquement CSS ?

Comment conserver le rapport d'aspect Div avec un dimensionnement réactif

Bien que CSS permette aux images de conserver leur rapport d'aspect avec une largeur ou une hauteur basée sur un pourcentage, la même technique peut ne pas semblent directement applicables à d’autres éléments. Cependant, il est possible de conserver les proportions d'un div en utilisant du CSS pur.

Solution :

Exploitez le fait que les pourcentages de remplissage supérieurs sont relatifs au contenu la largeur du bloc. En combinant cela avec une structure div imbriquée, vous pouvez créer un élément verrouillé aux proportions.

Exemple :

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

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

Dans cet exemple, le .wrapper div a une largeur de 50 %. Un pseudo-élément (.wrapper:after) est ajouté pour établir le rapport hauteur/largeur : dans ce cas, il s'agit de 16:9. Le div .main imbriqué remplit l'intégralité du div .wrapper, garantissant que le contenu conserve le rapport hauteur/largeur spécifié lorsque le div .wrapper est redimensionné.

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!