Comment styliser une division en carré réactif ?

Styliser un div comme un carré réactif

Réaliser un élément div qui ajuste automatiquement sa hauteur pour correspondre à sa largeur tout en conservant ses proportions peut être un défi de style commun. Voici une explication détaillée et une solution :

Méthodologie CSS

Pour créer un div carré réactif, nous pouvons utiliser la propriété CSS "padding-bottom" et l'unité "% ". Cette méthode garantit que la hauteur du div reste proportionnelle à sa largeur. En définissant le padding-bottom sur la même valeur en pourcentage que la largeur, nous créons effectivement un conteneur de forme carrée.

Code HTML et CSS

Voici le HTML et Code CSS qui accomplit ceci :

<div>

#square {
  height: 0;
  width: 20%;
  padding-bottom: 20%;
  background-color: red;
}

Explication

• La propriété "height" est définie sur 0, permettant au padding-bottom de contrôler la hauteur.
• La propriété "width" est définie sur 20 %, définissant le pourcentage de largeur du div.
• La propriété "padding-bottom" est également définie sur 20 %, créant un div de forme carrée.

À mesure que la largeur du conteneur parent change, le div conservera sa rapport d'aspect, ajustant automatiquement sa hauteur pour correspondre à son nouveau largeur.

Compatibilité

Cette solution fonctionne efficacement sur divers navigateurs, notamment Firefox, Chrome, Edge et Safari.

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!