[обновление: хотя я обнаружил этот трюк самостоятельно, я с тех пор узнал, что И Thierry Koblentz опереди меня. Вы можете найти его статья 2009 в списке отдельно. Кредит, где кредит должен.]

Я знаю, это старый вопрос, но я столкнулся с подобной проблемой, что я сделал решить только с помощью CSS. Вот мой блоге это обсуждает решение. Включено в пост это видео. Код Перепечатано ниже.

HTML:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS:

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

есть способ с помощью CSS!

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

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

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

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

это возможно без какого-либо Javascript:)

эта статья описывает его отлично -http://www.mademyday.de/css-height-equals-width-with-pure-css.html

HTML:

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div> 

CSS:

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

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

/* Other ratios - just apply the desired class to the "box" element */
.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%;
}

простой и neet: использовать vw блоки для отзывчивых высоты / ширины согласно ширине видового экрана.

vw: 1/100 ширины видового экрана. (источник MDN)

демо

HTML:

<div></div>

CSS для соотношения сторон 1:1:

div{
    width:80vw;
    height:80vw; /* same as width */
}

---

таблица для расчета высоты в соответствии до нужного соотношения сторон и ширины элемента.

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

---

эта техника позволяет :

• вставьте любое содержимое внутри элемента без использования position:absolute;
• нет ненужной разметки HTML (только один элемент)
• адаптировать соотношение сторон элементов в соответствии с высотой видового экрана с помощью vh единиц
• вы можете сделать отзывчивый квадрат или другое соотношение сторон, которое всегда вписывается в видовой экран в соответствии с высота и ширина окна просмотра (см. Этот ответ:отзывчивый квадрат согласно ширине и высоте вьюпорта или это демо)

эти устройства поддерживаются IE9 + см. canIuse для получения дополнительной информации

очень простой способ jsfiddle

HTML

<div id="container">
    <div id="element">
        some text
    </div>
</div>

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}

расширяя технику заполнения сверху / снизу, можно использовать псевдо-элемент для установки высоты элемента. Используйте переполнение, плавающие и отрицательные поля, чтобы удалить псевдо-элемент из представления и потока.

Это позволяет размещать содержимое внутри коробки без использования дополнительного div и / или CSS позиционирования.

.fixed-ar {
  overflow: hidden;
}
.fixed-ar:before {
  content: "";
  float: left;
  margin-left: -10px;
  width: 10px;
  padding-top: 100%;
}
.fixed-ar-4-3:before {
  /* 100 * 3 / 4 = 75 */
  padding-top: 75%;
}
.fixed-ar-16-9:before {
  /* 100 * 9 / 16 = 56.25 */
  padding-top: 56.25%;
}
/* examples */
.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  color: #999;
  background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat;
  background-size: contain;
}

<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>

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

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

на .стихия помогла. См.http://jsfiddle.net/B8FU8/3111/

ширина: 80vmin; высота: 80vmin;

CSS делает 80% от наименьшего вида, высоты или ширины

http://caniuse.com/#feat=viewport-units