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

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

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

<div class="container"></div>

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

.container {
  position: relative;
  display: inline-block;
}
.container:before {
  content: "";
  padding-top: 100%;
  position: relative;
  display: inline-block;
}

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

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

<div class="container"><div class="content-container"></div></div>

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

.container {
  position: relative;
  display: inline-block;
}
.container:before {
  content: "";
  padding-top: 100%;
  position: relative;
  display: inline-block;
}
.container .content-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

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

Сладенькое.

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

(function () {
  function addStyle (className, css) {
    var key,
        sheet, 
        cssStr = [],
        style = document.createElement('style');
   
    document.head.appendChild(style);

    sheet = style.sheet || style.styleSheet;

    for (key in css) {
      cssStr.push(key + ':' + css[key]);
    }
    cssStr = cssStr.join(';');

    if (sheet.insertRule) {
      sheet.insertRule(className + ':before' + ' {' + cssStr + '}', sheet.cssRules.length);
    } else {
      sheet.addRule(className + ':before', cssStr);
    }

    return style;
  }

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

    addStyle('.' + className, {
      'content': '""',
      'padding-top': value + '%;'
    });
  });
})();