Comment puis-je rendre la hauteur d'un élément CSS dynamiquement égale à sa largeur ?

Assurer que la hauteur est égale à la largeur dynamique dans une mise en page CSS fluide

En CSS, définir la hauteur d'un élément égale à sa largeur pour conserver une le rapport hauteur/largeur carré peut s’avérer difficile. Cette question explore une solution CSS uniquement pour obtenir cette mise en page dynamique.

La solution consiste à créer un élément factice vide avec sa marge supérieure définie en pourcentage. Ce pourcentage représente le rapport hauteur/largeur de la forme souhaitée. Par exemple, un rapport hauteur/largeur de 1:1 aurait une marge supérieure de 100 %.

À l'intérieur de l'élément conteneur, un élément supplémentaire est ajouté avec un positionnement absolu. Cet élément, stylisé avec la couleur d'arrière-plan souhaitée, s'étire pour remplir tout le conteneur, ce qui donne un rapport hauteur/largeur carré qui s'ajuste automatiquement à la largeur du conteneur.

Cette astuce fournit un moyen simple et efficace de définir le hauteur d'un élément égale à sa largeur, permettant la création de mises en page dynamiques et fluides avec des proportions carrées en CSS.

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!