Comment puis-je utiliser CSS pour que la hauteur d'un élément corresponde dynamiquement à sa largeur ?

Régler la hauteur du fluide pour qu'elle corresponde à la largeur dynamique à l'aide de CSS

Il peut être difficile d'établir une hauteur qui reflète parfaitement la largeur, surtout lorsque vous travaillez avec des mises en page dynamiques. Cependant, une technique CSS astucieuse nous permet d'atteindre ce rapport 1:1.

En CSS, la propriété "hauteur" accepte diverses unités de mesure, dont "identique à la largeur". Malheureusement, cette valeur n'existe pas dans les implémentations CSS actuelles.

Heureusement, une solution de contournement a émergé, utilisant les propriétés « display » et « position » ainsi qu'un élément factice. Cette solution implique :

1. Définir l'élément conteneur sur un positionnement "inline-block" et "relatif".
2. Ajouter un élément factice avec une valeur de marge supérieure qui génère l'aspect souhaité rapport. Dans cet exemple, un rapport hauteur/largeur de 4:3 est utilisé (marge supérieure de 75 %).
3. Positionnement d'un élément absolu dans le conteneur pour étirer et remplir tout l'espace disponible.

En employant cette technique, l'élément absolu ajustera automatiquement sa hauteur pour correspondre à la largeur du conteneur, quelle que soit sa nature dynamique. L'élément factice sert d'espace réservé pour définir le rapport hauteur/largeur initial, qui peut être modifié pour obtenir différentes proportions.

Cette solution offre un moyen propre et efficace de créer des mises en page fluides et dynamiques avec des rapports hauteur/largeur cohérents. en utilisant uniquement 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!