为什么CSS不具备元素保持宽度：高度比的能力

Question

所以，这可能是愚蠢的，但在我看来，CSS会受益于能够做类似以下的事情：

.some-element {
    width:100%;
    height:50% of width;
}

但属性不能引用其他属性或变量。这不是一个非常常见的用例，但它经常发生，我想知道为什么不存在像基于比率的高度这样简单的东西。像img这样的元素已经这样做了，但其他元素却不能。

编辑（试图澄清我想要找到的内容）

是否有一些关于CSS作为一种语言可以阻止它具有这样的语法，或者只是因为这个功能没有被添加？

Answer 1

您可以use an image使div遵循相同的规则：

<div>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
</div>

div img {
    width: 100%;
    display: block;
}

div {
    background-color: red;
    width: 250px;
}

在该示例中，div是正方形