Comment créer une division CSS avec une hauteur égale à sa largeur dynamique ?

Largeur dynamique de correspondance de hauteur : une mise en page fluide CSS

Visant à obtenir une conception visuellement équilibrée, les développeurs cherchent souvent à aligner la hauteur d'un élément à sa largeur. Cette question répond à un défi de conception courant : comment créer un div avec une hauteur égale à sa largeur, en conservant un rapport hauteur/largeur de 1:1 tout en permettant à la largeur de varier dynamiquement.

Une solution proposée implique l'utilisation d'un élément d'espace réservé avec un rapport hauteur/largeur prédéfini. En plaçant l'élément principal dans l'espace réservé, le rapport hauteur/largeur est conservé même si la largeur de l'élément principal change. La clé réside dans l'exploitation des propriétés CSS telles que position et margin-top pour aligner stratégiquement les éléments et garantir que leurs dimensions restent proportionnées.

L'extrait de code suivant illustre l'approche :

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

Dans ce Par exemple, le #container établit la largeur dynamique du div. L'élément #dummy est utilisé comme espace réservé avec un rapport hauteur/largeur fixe de 4:3, obtenu grâce à la propriété margin-top. Le #element est ensuite positionné de manière absolue dans le #dummy, garantissant qu'il remplit toute la zone et conserve le même rapport 1:1 que la largeur.

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!