CSS/LESS: Comment définir la hauteur de div égale à 112% de la largeur de son parent?

Question

I ont deux divs, div.outer et div.inner:

<div class='outer'><div class='inner'>...content...</div</div> 

div.outer peut être redimensionné à la fois, largeur et hauteur de façon indépendante. (Pas par l'utilisateur lui-même.)

A l'intérieur de ce div est div.inner avec une largeur de 90% de celle de son parent div.outer. Cette div doit avoir un rapport d'aspect de height/width = 1.24. Donc, la hauteur doit être 1,24 fois plus grande que la largeur. En d'autres termes, comment définir la hauteur d'un div égal à 112% de la largeur de son parent? (1.2 * 90 ≈ 112) Je suis à la recherche d'une solution en CSS moins ou standard. (Seulement javascript/jQuery si nécessaire).

Ici, en pseudo-CSS:

.outer{ 
    width: resizable; 
    height: resizable; 
} 

.inner{ 
    width: 90%; 
    height: 1.12 * width_of(.outer); 
} 

Merci à l'avance.

Answer 1

Il y a une astuce pour maintenir le ratio d'aspect d'un div, j'apprendre dans ce blog espagnol: https://escss.blogspot.com/2013/08/aspect-ratios-css.html

Vous devez ajouter un div supplémentaire, mais est peut-être utile pour vous ou une première étape pour obtenir une solution :

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
.outer { 
 
    width: 300px; 
 
    border: solid 1px green; 
 
} 
 

 
.inner { 
 
    border: solid 1px red; 
 
    width: 90%; 
 
    position: relative; 
 
} 
 

 
.inner:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 124%; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="content"> 
 
     ... content ... 
 
    </div> 
 
    </div> 
 
</div>