CSS: сделать ширину div пропорциональной высоте

Это немного сложно объяснить, но: я хочу div с отзывчивой высотой (height: 100%) это будет масштабироватьширина пропорциональнорост (не наоборот).

я знаюЭтот метод используяpadding-top Взломать, чтобы высота была пропорциональна ширине, но мне нужно, чтобы она работала наоборот. Сказав это, я не очень заинтересован в дополнительном требовании абсолютно позиционируемых элементов для контента в этом методе, поэтому я понимаю, что вполне могу просить луну здесь.

Чтобы помочь визуализировать, вот изображение:

... и вотjsFiddle, иллюстрируя в значительной степени то же самое.

Стоит отметить, что я уже использую:before а также:after псевдоэлементы для вертикального выравнивания содержимого поля, которое я хочу пропорционально масштабировать.

Мне бы очень, очень понравилось, не возвращаясь к jQuery, просто потому, что будет неотъемлемое требование для обработчиков изменения размера и, как правило, больше отладки со всех сторон ... но если это мой единственный выбор, тоуказ.