Comment maintenir le rapport hauteur/largeur d'une division avec CSS pour un affichage réactif ?

Maintenir les proportions d'un div en CSS pour un affichage réactif

Dans le domaine de la conception Web réactive, il est crucial de conserver les proportions d'un élément pour garantir son intégrité visuelle sur différentes tailles d’écran. Pour y parvenir, CSS propose une solution astucieuse qui ajuste automatiquement la hauteur d'un div en fonction de sa largeur, préservant ainsi sa forme carrée.

Pour implémenter cet effet, appliquez simplement le code CSS suivant à votre élément div :

div {
  height: 0;
  padding-bottom: 100%;
}

Cette technique utilise un remplissage basé sur un pourcentage sur le div, créant ainsi un rapport hauteur/largeur carré qui évolue proportionnellement à la largeur du div. Le div externe agit comme un espace réservé pour le carré, tandis que le div interne contient le contenu réel.

Conseils supplémentaires :

• Utilisez la propriété background-color pour ajouter une couleur d'arrière-plan au div et améliorer sa visibilité.
• Ajustez la valeur en pourcentage dans la propriété padding-bottom pour modifier le rapport hauteur/largeur comme souhaité.

Exemple de code :

<div>

Cette technique est prise en charge par la plupart des navigateurs et garantira que votre élément div conserve sa forme carrée quel que soit le parent. largeur.

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!