有没有一种方法可以在CSS计算规则中使用self的宽度

Question

我已经读过用CSS维护div的纵横比(不是重复的，请进一步阅读(和其他方法，但这里我要问一些更具体的问题：

有没有办法在CSS计算规则中使用当前元素(self(的宽度

或者，如果没有，是否可以在height: calc(...)中使用父元素的width？

类似于：

#container { 
display: flex; 
width: 500px; 
flex-direction: row; 
}
#a { 
background-color: red; 
width: 50%;
}
#b { 
background-color: blue; 
width: 50%;
height: calc(100% of self current width); /* <------- pseudo code here - does this exist? */
}

<div id="container">
<div id="a">
Hello
</div>
<div id="b">
World
</div>
</div>

Answer 1

您可以使用padding-top: 100%;使宽度：高度=1:1。

参考：https://www.w3schools.com/howto/howto_css_aspect_ratio.asp