如何使高度相对于宽度

Question

我要根据宽度设置高度，较小宽度，较高高度，以保持元素的表面积不变。如何仅使用CSS来实现？

height: calc(???)

Maintain the aspect ratio of a div with 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>