Как задать относительную высоту?

Question

[artekha]

Здравствуйте, мне нужно как то задать относительную высоту, что бы при изменении ширины, высота подстраивалась, допустим у элемента ширина 1000px, значит высота должна быть 300px, если увеличить ширину до 3000px, высота будет 600px, в общем нужно что бы высота всегда была 30% от ширины.

Comments

[automatik]

30% от 3000px это 900, не 600.

Answer 1

[Саша]

Пробуйте на JS, а мы поможем)

Comments

[artekha]

На js изи, нужно на css

[Саша]

artekha: пока идей нет, как на css реализовать.
Скорее всего ни как, если речь о динамических данных + без костылей.

[artekha]

Костыли допустимы, главное на css

[Саша]

artekha: блок будет с фиксированными размерами, то есть контент не будет вылазить за его пределы?
если да, то положите в блок картинку нужных размеров, на неё opacity:0; visible:hidden;
а контент на absolute разместите.

[artekha]

Саша: codepen.io/artekha/pen/zZobrp

[Саша]

artekha: ?

Answer 2

[Александр Филиппенко]

Если ширина контейнера как-то соотносится с шириной окна (экрана), то можно высоту задать в vw.

Comments

[Саша]

Александр Филиппенко размеры экрана могут быть разными, а так же имейте ввиду ориентацию на мобильных девайсах.

[Александр Филиппенко]

Саша: тогда либо использование calc с единицами заданными в vw и в %, либо js. Я других вариантов не вижу.

[Саша]

Александр Филиппенко: calc не поможет, так как нужен размер соотношения размеров блока, а не окна.

[Александр Филиппенко]

Саша: А блок зависит от окна как-то?

[Саша]

Александр Филиппенко: судя по всему нет)

Answer 3

[Григорий]

а через css переменные нельзя?
Типа
--container-width: 1000px;
height: calc(var(--container-width) / 3);

Comments

[Саша]

Григорий это же тогда будут не динамические данные

[Григорий]

Саша: ну вместо 1000px поставить 75%

я просто сам не пробовал, это как идея