CSS peut-il maintenir un rapport hauteur/largeur de 1:1 en faisant correspondre dynamiquement la hauteur et la largeur des éléments ?

Faire correspondre dynamiquement la hauteur à la largeur dans une mise en page fluide CSS

Dans une mise en page CSS fluide, les éléments peuvent automatiquement ajuster leur taille en fonction de l'espace disponible . Cela peut poser un défi lorsque vous essayez de conserver un rapport hauteur/largeur spécifique, tel qu'un carré ou un rectangle.

Question :

Le CSS peut-il être utilisé pour définir la hauteur de un élément doit avoir la même largeur, en conservant un aspect 1:1 ratio?

Exemple :

Considérons un élément conteneur et un élément div imbriqué avec la structure suivante et mise en page :

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS :

div {
  width: 80%;
  height: same-as-width
}

Solution :

Bien qu'il ne soit pas possible de régler la hauteur explicitement pour faire correspondre la largeur avec CSS seul, une solution de contournement peut être obtenue en utilisant un élément factice et intelligent positionnement.

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div>

En utilisant la propriété margin-top sur l'élément factice et en la définissant à 75 % (pour correspondre à un rapport hauteur/largeur de 4:3), nous créons une référence pour la hauteur. L'élément est alors positionné de manière absolue à l'intérieur de cette zone de référence, ce qui donne une hauteur égale à sa 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!