我要根据宽度设置高度,较小宽度,较高高度,以保持元素的表面积不变。如何仅使用CSS来实现?
height: calc(???)
Maintain the aspect ratio of a div with CSS的答案都没有回答我的问题。我不需要纵横比恒定,而表面积不变。
答案 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>