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

Création d'un div réactif de forme carrée

Question :

Comment pouvez-vous concevoir un élément div en CSS pour conserver un rapport hauteur/largeur carré, en ajustant sa hauteur proportionnellement à sa largeur, en tant qu'élément parent redimensionne ?

Réponse :

Il existe une technique simple pour y parvenir en utilisant le remplissage :

1. Réglez la hauteur du div sur 0. Cela "trompe" le navigateur pour qu'il rende la hauteur flexible.
2. Définissez la largeur du div comme un pourcentage.
3. Réglez le padding-bottom sur le même pourcentage que la largeur. Cela oblige le navigateur à ajuster la hauteur pour conserver un rapport hauteur/largeur carré.

Voici un exemple de code :

<div>

Le div le plus à l'extérieur établit la forme carrée, tandis que le div intérieur contient le contenu réel. Cette approche maintient efficacement un rapport hauteur/largeur carré à mesure que la largeur de l'élément parent change. Il est compatible avec la plupart des navigateurs.

Un exemple en direct peut être trouvé sur jsfiddle : [insérer le lien jsfiddle ici]

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!