CSS/LESS: Как установить высоту div равную 112% ширины ее родительского?

Question

У меня есть две дивы, div.outer и div.inner:

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

div.outer могут быть изменены, и ширина и высота независимо друг от друга. (Пользователь не он сам.)

Внутри этого div находится div.inner с шириной 90% от его родителя div.outer. Этот div должен иметь соотношение сторон height/width = 1.24. Таким образом, высота должна быть в 1,24 раза больше ширины.

Другими словами, как вы устанавливаете высоту div равным 112% ширины своего родителя? (1.2 * 90 ≈ 112) Я ищу решение в Менее или стандартном CSS. (При необходимости, только javascript/jQuery).

Вот в псевдо-CSS:

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

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

Спасибо заранее.

Answer 1

Существует трюк для поддержания соотношения сторон div, я учусь в этом испанском блоге: https://escss.blogspot.com/2013/08/aspect-ratios-css.html

Вы должны добавить дополнительный div, но может быть полезно для вас или первого шага, чтобы получить решение :

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>