Как сделать высоту относительно ширины

Question

Я хочу сделать свою высоту в зависимости от ширины, меньше ширины, выше высоты как при сохранении постоянной площади поверхности элемента.Как мне добиться этого, используя только CSS?

height: calc(???)

Ни один из ответов Сохранить соотношение сторон div с помощью CSS не отвечает на мой вопрос.Мне не нужно иметь постоянное соотношение сторон, но постоянную площадь поверхности.

Answer 1

Здесь высота автоматически становится половиной ширины.--box-width:300px и /2 изменяемые.

:root {
  --box-width: 300px;
}

.box {
  width:var(--box-width);
  height:calc(var(--box-width)/2);
  background:pink;
}

<div class="box"></div>