css - 为什么 CSS 不能让元素保持宽高比

Question

所以，这可能是愚蠢的，但在我看来，CSS 将受益于执行类似以下操作的能力：

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

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

编辑（尝试澄清我要找出的内容）

CSS作为一种语言是否有一些东西阻止它具有这样的语法，或者只是因为没有添加这个特性而出现这种情况？

score 3 · Accepted Answer

您可以使用图像使 div 遵循相同的规则：

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

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

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

在那个例子中，div 是正方形的

1 回答 1