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>

Résultat :

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.

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!