Укажите естественный размер элемента HTML

Вот мое супер-пупер решение:

HTML

<div class="ratioBox">
    <div class="dummy"></div>

     <div class="el">This is the super duper ratio element </div>

</div>

CSS

.ratioBox{
    position: relative;
    overflow: hidden;      /* to hide any content on the .el that might not fit in it */
    width: 75%;            /* percentage width */
    max-width: 225px;
    min-width: 100px;
    max-height: 112.5px;
    min-height: 50px;  
}

.dummy {
    padding-top: 50%;      /* percentage height */
}

.el {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}

​

Посмотрите, как это работает здесь: http://jsfiddle.net/joplomacedo/7rAcH/

Измените размер div как изображение с помощью CSS

DEMO: измените размер окна результатов (ширину и высоту), чтобы увидеть элемент div. изменить размер, как изображение.

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

Этот метод использует vh/vw. единиц. Они позволяют вам установить ширину в соответствии с высотой области просмотра и высоту в соответствии с шириной области просмотра.
С помощью комбинированного использования max-width и max-height вы можете заставить его вести себя и изменять размер как изображение при изменении размера браузера.
Поддержка браузеров для этих устройств: IE9+. Для получения дополнительной информации см. раздел canIuse.
В приведенной выше демонстрации используется соотношение сторон 1:1, но вы можете с небольшими расчетами использовать любое другое соотношение сторон, например:

• Соотношение сторон 4:3: демонстрация
• Соотношение сторон 16:9: демонстрация

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

div{    
    width: 80vw; 
    height: 80vh;

    max-width: 80vh;
    max-height: 80vw;
}

Еще один шаг: vmin и vmax

Вы также можете использовать vmin/vmax. Эти единицы выбирают минимальное или максимальное значение между шириной и высотой окна просмотра, чтобы вы могли иметь желаемое поведение max/min-height и max/min-width. Но поддержка браузерами этих единиц не так хороша, как vh/vw (canIuse).

Демо

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

div{    
    min-width:200px;
    min-height:200px;

    width: 80vmin; 
    height: 80vmin;

    max-width: 800px;
    max-height: 800px;
}

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