Определение ширины div в процентах от высоты

Question

Мне нужно сохранить соотношение сторон div при изменении размера окна браузера.

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

Метод показан here на переполнение стека, и, в частности, этот пример linked to показывает технику в действии.

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

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

Answer 1

Я не знаю, возможно ли это в чистом CSS, но есть возможный путь с JQuery см this discussion

Может быть что-то вроде mmoustafa предложил:

$(window).resize(function() { 
    $('#my-div').css('width', window.innerHeight*0.4+'px'); 
    $('#my-div').css('height', window.innerHeight*0.2+'px'); 
}); 

Answer 2

Мне нужна ширину div для изменения при изменении высоты окна браузера.

Для чистого CSS решения, что вам придется ждать более широкой реализации либо calc() или vh блока.