Puis-je mettre à l'échelle la hauteur d'un div proportionnellement à sa largeur en utilisant CSS ?

Question

Puis-je définir n'importe quelle variable dans CSS comme je veux que ma hauteur div soit toujours la moitié de la largeur mes échelles div avec la largeur de la taille de l'écran pour div est en pourcentage

 <div class="ss"></div>

CSS :

 .ss {
    width:30%;
    height: half of the width;
}

Cette largeur de 30% s'adapte à la résolution de l'écran

Answer 1

Vous pouvez le faire à l'aide du remplissage sur un élément parent, car le remplissage relatif (même en hauteur) est basé sur la largeur de l'élément parent.

CSS :

 .imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

Ceci est basé sur cet article: Mise à l'échelle proportionnelle des boîtes réactives en utilisant uniquement CSS

Answer 2

Un autre excellent moyen d'y parvenir est d'utiliser une image transparente avec un rapport hauteur/largeur défini. Réglez ensuite la largeur de l'image sur 100 % et la hauteur sur auto. Cela fera malheureusement baisser le contenu original du conteneur. Vous devez donc envelopper le contenu d'origine dans un autre div et le positionner absolument en haut du div parent.

 <div class="parent">
   <img class="aspect-ratio" src="images/aspect-ratio.png" />
   <div class="content">Content</div>
</div>

CSS

 .parent {
  position: relative;
}
.aspect-ratio {
  width: 100%;
  height: auto;
}
.content {
  position: absolute;
  width: 100%;
  top: 0; left: 0;
}

Answer 3

Vous pouvez utiliser la largeur de vue pour la "largeur" et encore la moitié de la largeur de vue pour la "hauteur". De cette façon, vous êtes assuré d'avoir le bon rapport quelle que soit la taille de la fenêtre.

<div class="ss"></div>

 .ss
{
    width: 30vw;
    height: 15vw;
}

Violon

Answer 4

Cette réponse est à peu près la même que les autres, sauf que je préfère ne pas utiliser autant de noms de classe. Mais ce n'est qu'une préférence personnelle. Vous pourriez argumenter que l'utilisation de noms de classe sur chaque div est plus transparente car elle déclare à l'avance l'objectif des div imbriqués.

 <div id="MyDiv" class="proportional">
  <div>
    <div>
      <p>Content</p>
    </div>
  </div>
</div>

Voici le CSS générique :

 .proportional { position:relative; }
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }

Ensuite, ciblez le premier div interne pour définir la largeur et la hauteur (padding-top):

 #MyDiv > div { width:200px; padding-top:50%; }