Comment créer une mise en page carrée fluide avec CSS à l'aide d'un élément factice ?

Création d'une mise en page fluide avec une hauteur égale à la largeur

En CSS, il est possible de définir dynamiquement la hauteur d'un élément pour qu'elle soit la même que sa largeur, créant un rapport hauteur/largeur de forme carrée. Pour y parvenir, nous utilisons une technique intelligente connue sous le nom de méthode des « éléments factices ».

Étapes :

1. Définissez un élément div conteneur avec display : inline -block et position : relatif.
2. Créez un élément "factice" dans le conteneur avec une marge supérieure égale à 75%. Cela établit un rapport hauteur/largeur de 4:3.
3. Positionnez un élément absolu dans le conteneur (#element), qui remplira la hauteur et la largeur du conteneur.

Exemple :

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

#dummy {
  margin-top: 75%;
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}

<div>
<p><strong>Résultat :</strong></p>
<p>Cette technique crée efficacement un disposition fluide où la hauteur du div #element s'ajuste dynamiquement en fonction de la largeur spécifiée du div #container. Lorsque vous redimensionnez le conteneur, l'élément conserve ses proportions carrées.</p>
</div>

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!