Адаптивная высота, пропорциональная ширине

Ответ 1

Заполнение%

Это может быть достигнуто путем предоставления элемента height:0 и padding-bottom:30%.

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

JSFiddle Demo

В демонстрации синий сингл в верхней части страницы - это один div. Высота чувствительна и может содержать переменное количество встроенного содержимого без увеличения высоты. Он отлично протестирован в IE7/8/9/10, Firefox, Chrome, Safari и Opera.

.content {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
}
...
<div class="content"></div>

Заполнение% и абсолютное положение

Если возникают проблемы с использованием элемента 0-height, demo также имеет зеленый квадрат, который реализован с использованием элемента обертки и абсолютной позиции. Не уверен, есть ли какие-либо преимущества для этого подхода.

.wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 30%;
}
.wrapper .content {
    position: absolute;
    width: 100%;
    height: 100%;
}
...
<div class="wrapper">
    <div class="content"></div>
</div>

Ответ 2

Теперь это возможно для современных браузеров с vw и vh единицами:

width: 100vw;
height: 30vw; /* 30% of width */

Поддержка браузера: http://caniuse.com/#feat=viewport-units

Да!

Ответ 3

Также с помощью JQuery вы можете сделать:

$(window).ready(function () {
    var ratio = 3 / 10, $div = $('#my_proportional_div');
    $div.height($div.width() * ratio);
    $(window).bind('resize', function() { $div.height($div.width() * ratio); });
});

поскольку предлагаемое решение Padding% не работает с max/min-width и max-min height.