如何使高度相对于宽度

时间:2018-12-06 08:23:19

标签: html css css3

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

height: calc(???)

Maintain the aspect ratio of a div with CSS的答案都没有回答我的问题。我不需要纵横比恒定,而表面积不变。

1 个答案:

答案 0 :(得分:0)

此处高度自动变为宽度的一半。 --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>