Есть способ сделать это с помощью CSS!

Если вы установите ширину в зависимости от родительского контейнера, вы можете установить высоту в 0 и задать нижний отступ в процентах, который будет рассчитываться в зависимости от текущей ширины:

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

Это хорошо работает во всех основных браузерах.

JSFiddle: https://jsfiddle.net/ayb9nzj3/

Да, это можно сделать без использования JavaScript 😃

Вот HTML-код:

<div class='box'>
    <div class='content'>Соотношение сторон 1:1</div>
</div> 

А вот CSS:

.box {
    position: relative;
    width:    50%; /* желаемая ширина */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* начальное соотношение 1:1 */
}

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

/* Для других соотношений - просто примените нужный класс к элементу "box" */
.ratio2_1:before {
    padding-top: 50%;
}
.ratio1_2:before {
    padding-top: 200%;
}
.ratio4_3:before {
    padding-top: 75%;
}
.ratio16_9:before {
    padding-top: 56.25%;
}

Таким образом, вы можете легко изменить соотношение сторон, просто добавив соответствующий класс к элементу .box.

Используя jQuery, вы можете достичь этого, выполнив следующий код:

var cw = $('.child').width();
$('.child').css({'height': cw + 'px'});

Проверьте работающий пример по следующей ссылке: http://jsfiddle.net/n6DAu/1/

В ответ на ваш вопрос, можно расширить техники использования padding для создания фиксированных аспектных соотношений, применив псевдоэлемент. Используя флоаты и отрицательные отступы, мы можем убрать псевдоэлемент из потока и из видимости.

Это позволяет разместить содержимое внутри элемента без необходимости использования дополнительного <div> или CSS-позиционирования.

Вот пример кода:

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

/* пропорции */

.fixed-ar-1-1::before {
  padding-top: 100%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-16-9::before {
  padding-top: 56.25%;
}

/* демонстрация */

.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
  background-size: contain;
}

А вот пример использования этих классов в HTML:

<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

Таким образом, мы сможем установить разные пропорции для элементов, используя только CSS и минимизируя необходимость в дополнительных структурах разметки.

Свойства width: 80vmin; и height: 80vmin; в CSS означают, что элемент будет занимать 80% от минимального значения между шириной и высотой вьюпорта (области просмотра). То есть, если ширина вьюпорта равняется 1000px, а высота — 800px, то vmin будет равен 800px (поскольку 800px меньше 1000px), и в итоге элемент будет иметь ширину и высоту по 640px (80% от 800px).

Если хотите подробнее узнать о вьюпортных единицах, можете обратиться к Can I use.