Comment créer une division carrée réactive avec une hauteur et une largeur égales ?

Div carré réactif avec hauteur et largeur égales

Votre objectif est de créer un élément div qui ajuste automatiquement sa hauteur en fonction de sa largeur, quelle que soit la taille de l'élément parent. Pour y parvenir, CSS dispose d'une solution simple et efficace :

Utilisation du pourcentage de remplissage en bas :

Ajoutez le CSS suivant à votre div :

height: 0;
width: 20%;
padding-bottom: 20%;
background-color: red;

Voici comment cela fonctionne :

• Réglez la hauteur sur 0, ce qui fait que le div est initialement effondré.
• Spécifiez un pourcentage de largeur (par exemple, 20%).
• Définissez padding-bottom sur le même pourcentage que la largeur. Ceci détermine la hauteur du div.
• La couleur d'arrière-plan est ajoutée pour rendre le carré visible.

Div imbriqué facultatif :

Pour plus de flexibilité dans le placement du contenu, envisagez de créer un div imbriqué dans le div carré. Cela vous permet de centrer ou d'aligner le contenu selon vos besoins.

<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!