How to set relative height?

Question

css

Hello, I need to somehow set the relative height, so that when the width changes, the height adjusts, let's say the element has a width of 1000px, so the height should be 300px, if you increase the width to 3000px, the height will be 600px, in general, you need the height to always be 30 % of width.

Answer 1

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

Answer 2

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

Answer 3

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