Comment créer un div réactif de forme carrée avec CSS ?

Comment créer un div réactif de forme carrée avec CSS ?

Précédemment posée, cette question recherche une méthode pour modifier dynamiquement la hauteur d'un div pour qu'elle corresponde à sa largeur. La largeur est exprimée en pourcentages, donc à mesure que la largeur de l'élément parent diminue, le div doit diminuer proportionnellement.

Pour résoudre ce problème, nous pouvons utiliser la propriété padding-bottom de CSS. En définissant padding-bottom en pourcentage, nous pouvons créer un rapport entre la hauteur et la largeur du div, en garantissant qu'elles restent égales.

Voici un exemple de code :

<div>

Dans ce code, le div externe établit une forme carrée en utilisant la largeur : 20 % et la hauteur : 0. Le rembourrage en bas de 20 % définit le rapport entre la hauteur et la largeur, ce qui donne un rapport hauteur/largeur de 1 : 1. Le div interne contient le contenu réel.

De plus, une démonstration JavaScript Fiddle est fournie pour présenter la fonctionnalité : [lien vers Fiddle]

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!