Déterminer la hauteur en fonction de la longueur et inversement - Le laboratoire

Comment déterminer la hauteur en fonction du width ?

Déterminer la hauteur en fonction de la valeur calculée de width

Il est possible qu'un jour, vous ayez besoin de spécifier la hauteur d'un élément en fonction de la valeur calculée de width.
Pour cela vous devez appliquer une valeur en pourcentage sur un padding-top ou un padding-bottom.
La valeur du padding est calculée en fonction de la valeur calculée du width de son premier parent qui n'est pas de type inline.
Dans notre exemple, le parent est ".heightfind", donc pour que le padding prenne pour référence de pourcentage son width, il faut que le padding soit appliqué à un élément enfant de ".heightfind". C'est pourquoi, nous créons un enfant virtuel grâce au pseudo-élément CSS :before et à la propriété CSS content

.heightfind {
  width: 30%;
  position: relative;
  display: inline-block;
}

.heightfind:before {
  content: "";
  display: block;
  height: 0;
  width: 100%;
  padding-top:100%;
}

.heightfind:last-child:before { 
  padding-top:50%;
}

.heightfind span{
  padding:5px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<div class="conteneur-heightfind">
  <div class="heightfind"></div>
  <div class="heightfind"><span>Quae dum ita struuntur</span></div>
</div>

Plus d'exemples pour déterminer hauteur en fonction de width

Comment déterminer la longueur en fonction de height ?

Déterminer la longueur en fonction de la valeur calculée de height

Il est possible qu'un jour, vous ayez besoin de spécifier la longueur d'un élément en fonction de la valeur calculée de height. Le principe est le même que dans le chapitre précèdent.
Dans notre exemple, le parent est ".widthfind". Nous utilisons writing-mode: vertical-lr pour changer le sens d'écriture, ce qui fait pour simplifier que ses enfants font "une rotation de virtuelle 45degré". Par ce petit tour de passe-passe, là c'est le height qui devient la taille de référence pour calculer le pourcentage du padding-left ou du padding-right.

.widthfind{
  writing-mode: vertical-lr;
  height: 100%;
  position: relative;
  display: inline-block;
}

.widthfind::before {
  content: "";
  display: block;
  height:100%;
  width: 0;
  padding-left:100%;
}

.widthfind:last-child:before {
  padding-left:200%;
}

.widthfind span{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  writing-mode: horizontal-tb;
  padding:5px;
}

<div class="conteneur-widthfind ">
  <div class="widthfind"></div>
  <div class="widthfind"><span>Quae dum ita struuntur</span></div>
</div>

Plus d'exemples pour déterminer la longueur en fonction de height