Comment puis-je maintenir les proportions des divs de manière réactive en utilisant uniquement CSS ?

Préserver les proportions des dimensions Div avec un redimensionnement réactif

L'un des aspects cruciaux de la conception Web réactive est de garantir que les éléments s'adaptent parfaitement aux différents tailles d'écran tout en conservant leurs caractéristiques intrinsèques. Imaginez que vous souhaitiez créer un élément div qui adhère à un rapport hauteur/largeur spécifique, semblable au comportement d'une image lorsqu'elle est spécifiée avec des pourcentages de largeur ou de hauteur. Est-il possible d'accomplir cela sans JavaScript ?

La réponse est un oui catégorique. Vous pouvez exploiter la puissance du CSS pur pour obtenir cet effet, comme le démontre l'exemple suivant :

.wrapper {
  width: 50%;
  display: inline-block;
  position: relative;
}

.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

Dans cet extrait, le div ".wrapper" sert de conteneur, avec sa largeur réglé à 50 % (vous pouvez l’ajuster à la taille souhaitée). L'aspect clé réside dans le pseudo-élément ".wrapper:after". En réglant son rembourrage supérieur à 56,25 %, qui est l'inverse du rapport hauteur/largeur souhaité (16:9 dans ce cas), la hauteur du conteneur s'ajustera automatiquement pour maintenir les proportions correctes.

Le " .main" div est positionné absolument dans ".wrapper" et remplit toute la zone. Il présente une couleur d'arrière-plan unie et un texte contrasté pour plus de visibilité.

En utilisant cette technique, vous pouvez créer des divs réactifs qui conservent leurs proportions sans effort, garantissant une esthétique visuelle cohérente sur différents appareils et tailles d'écran.

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!