CSS. Пропорциональная высота относительно ширины блока.

Без лишних слов.

Возьмем блок с которым будем работать.

<span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">&gt;&lt;/div&gt;</span>

Добавим необходимые стили

<span class="pun">.</span><span class="pln">container </span><span class="pun">{</span><span class="pln">
  position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">block</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">container</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln">
  content</span><span class="pun">:</span><span class="pln"> </span><span class="str">""</span><span class="pun">;</span><span class="pln">
  padding</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln">
  position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">block</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span>

Именно псевдо класс  :before  растягивает наш контейнер. Но псевдо класс  :before  с  position: replative; , что делает невозможным размещение других элементов с  position: replative;  внутри этого блока.

Решается это путем добавления нового блока с  position: absolute; 

<span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">&gt;&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content-container"</span><span class="tag">&gt;&lt;/div&gt;&lt;/div&gt;</span>

Добавим новые стили.

<span class="pun">.</span><span class="pln">container </span><span class="pun">{</span><span class="pln">
  position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">block</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">container</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln">
  content</span><span class="pun">:</span><span class="pln"> </span><span class="str">""</span><span class="pun">;</span><span class="pln">
  padding</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln">
  position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">block</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">container </span><span class="pun">.</span><span class="pln">content</span><span class="pun">-</span><span class="pln">container </span><span class="pun">{</span><span class="pln">
  top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
  left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
  width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln">
  height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln">
  position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span>

Теперь можем размещать что захотим и как захотим.

Сладенькое.

Что если нет возможности до загрузки страницы определить необходимый  padding-top  процент.
Ниже пример как добавить  padding-top  при помощи js.

<span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">function</span><span class="pln"> addStyle </span><span class="pun">(</span><span class="pln">className</span><span class="pun">,</span><span class="pln"> css</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> key</span><span class="pun">,</span><span class="pln">
        sheet</span><span class="pun">,</span><span class="pln"> 
        cssStr </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[],</span><span class="pln">
        style </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">'style'</span><span class="pun">);</span><span class="pln">
   
    document</span><span class="pun">.</span><span class="pln">head</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">style</span><span class="pun">);</span><span class="pln">

    sheet </span><span class="pun">=</span><span class="pln"> style</span><span class="pun">.</span><span class="pln">sheet </span><span class="pun">||</span><span class="pln"> style</span><span class="pun">.</span><span class="pln">styleSheet</span><span class="pun">;</span><span class="pln">

    </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="pln">key in css</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      cssStr</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">key </span><span class="pun">+</span><span class="pln"> </span><span class="str">':'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> css</span><span class="pun">[</span><span class="pln">key</span><span class="pun">]);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    cssStr </span><span class="pun">=</span><span class="pln"> cssStr</span><span class="pun">.</span><span class="pln">join</span><span class="pun">(</span><span class="str">';'</span><span class="pun">);</span><span class="pln">

    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">sheet</span><span class="pun">.</span><span class="pln">insertRule</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      sheet</span><span class="pun">.</span><span class="pln">insertRule</span><span class="pun">(</span><span class="pln">className </span><span class="pun">+</span><span class="pln"> </span><span class="str">':before'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">' {'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> cssStr </span><span class="pun">+</span><span class="pln"> </span><span class="str">'}'</span><span class="pun">,</span><span class="pln"> sheet</span><span class="pun">.</span><span class="pln">cssRules</span><span class="pun">.</span><span class="pln">length</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      sheet</span><span class="pun">.</span><span class="pln">addRule</span><span class="pun">(</span><span class="pln">className </span><span class="pun">+</span><span class="pln"> </span><span class="str">':before'</span><span class="pun">,</span><span class="pln"> cssStr</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    </span><span class="kwd">return</span><span class="pln"> style</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  document</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"DOMContentLoaded"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> className </span><span class="pun">=</span><span class="pln"> </span><span class="str">'container'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// имя класса контейнера к которому будут применяться стили</span><span class="pln">
        value </span><span class="pun">=</span><span class="pln"> </span><span class="lit">50</span><span class="pun">;</span><span class="pln"> </span><span class="com">// предположим мы посчитали, что нам необходимо 50%</span><span class="pln">

    addStyle</span><span class="pun">(</span><span class="str">'.'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> className</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="str">'content'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'""'</span><span class="pun">,</span><span class="pln">
      </span><span class="str">'padding-top'</span><span class="pun">:</span><span class="pln"> value </span><span class="pun">+</span><span class="pln"> </span><span class="str">'%;'</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">
</span><span class="pun">})();</span>