CSS: ширина в зависимости от высоты?

Question

[thehighhomie]

Добрый день! Пытаюсь средствами css сделать соотношение сторон (16:9, 4:3 и т.д.) по высоте.
Не смог найти решение, так как ничего из моего опыта не приходит на ум, кроме javascrip (его я не хочу использовать для этого дела).
Конечно же есть прекрасное решение, но это работает от ширины а не высоты, а я хочу от высоты выстроить соотношение.
Возможно ли это реализовать на css?

Answer 1

[Вадим Белкин]

Можно подробнее про требования, для чего и как это будет использоваться?
Мне пока на ум пришла идея только с распоркой в виде картинки с нужными пропорциями, минимального размера и максимально ужатого качества, например белые jpg/png размерами 16x9px и 4x3px которые по высоте 100% и с автоматической шириной и сделанные невидимыми, а самим блокам задаем высоту и делаем их инлайн блоками. Задав фиксированную высоту блоку картинка находящаяся внутри растягивается на всю высоту блока и её ширина увеличивается пропорционально, растягивая сам блок по ширине на пропорции картинки. Плюс внутри можно создать доп.блок для размещения контента растянув и отпозиционировав его поверх всего.
Пример

Comments

[thehighhomie]

мне нужно то же самое: www.mademyday.de/css-height-equals-width-with-pure... только по высоте

[thehighhomie]

мне нужно, чтобы блок растягивался как в примере, но я хочу контролировать его по высоте, то есть:
я создаю блок обертку ведео плейера (просто пример), и он должен быть в соотношении 16:9, но я хочу, чтобы он изменял размеры исходя из высоты посмотрите здесь, блоки адаптивны, но высота определяется по ширине, а мне нужно по высоте, это спецификация дизайна, в нее нет смысла углубляться, я же указал конкретную цель, и думаю вполне понятно.
Только мне не понятно как это решить, если это вообще возможно...

[Вадим Белкин]

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

[Вадим Белкин]

Только в примере с автовысотой используется распорка в виде псевдоэлемента и особенность работы padding или margin. А для автоматической пропорционально ширины для таких целей можно было бы использовать распорку в виде картинки и её особенностей работы с размерами

[Вадим Белкин]

Пример с видео https://jsfiddle.net/vh5tbsde/10/, задаете нужную высоту для .box и ширина автоматически меняется пропорционально

[thehighhomie]

Вадим Белкин, спасибо, хорошее кстати, решение, но картинка не вариант, если выбирать картину или js то в приоритет js будет, даже если картинка 1кб будет весить) к сожалению конечно(