Comment puis-je conserver les proportions sans JavaScript ?

Maintenir les proportions avec une largeur ajustée proportionnellement

Maintenir les proportions d'un élément en fonction de sa hauteur sans utiliser JavaScript peut être un défi. On pourrait envisager d'utiliser padding-left en pourcentage de la hauteur, mais cette méthode s'avère inefficace.

Considérez le balisage suivant :

<code class="html"><div class="box">
  <div class="inner"></div>
</div></code>

Le but est de maintenir le rapport hauteur/largeur de la boîte en fonction à sa hauteur, qui change dynamiquement en fonction d'une marge en pourcentage :

<code class="css">.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}</code>

Heureusement, une solution CSS native existe : la propriété aspect-ratio. Cette propriété vous permet de définir le rapport entre la largeur de l'élément et sa hauteur.

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 /1;
}</code>

Dans cet exemple, la boîte a une hauteur fluide de 50 % et un rapport hauteur/largeur de 2:1. Au fur et à mesure que vous redimensionnez le conteneur, la boîte conservera ses proportions, garantissant qu'elle reste toujours proportionnellement équilibrée.

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!