是否可以使用纵横比作为 CSS 中 calc() 的一部分？或者使用元素自己的宽度作为 calc() 的一部分？

Question

我知道我可以使用纵横比使元素的高度等于其自身宽度的特定折叠/部分，例如

aspect-ratio: 1 / 2

将使元素的高度是宽度的两倍。但是，如果我需要像

height: calc(the-element-width * 2 + 2rem + 40px);

这样的东西，有没有办法做到（不使用 javascript）？

我知道有一些技巧，例如使用百分比 padding-top/padding-bottom，但它仅在元素内没有内容时才有效。元素的宽度不是固定的像素数，因此 var() 函数也不起作用。

Answer 1

一种选择是利用 容器查询 并使用容器相对单位（如

cqw

或

cqh

）来获取任何属性和计算中容器的宽度或高度。

100cqw

等于容器宽度的 100%。

但请注意，如果您需要支持 IE 等旧版浏览器，它将无法工作。

#box {
  container-type: inline-size;
  width: 200px;
  
  .content {
    background-color: salmon;
    
    /* (200px / 2) + 20px = 120px */
    height: calc(50cqw + 20px);
    
    /* 200px / 10 = 20px */
    font-size: 10cqw;
  }
}

<div id="box">
  <div class="content">Lorem Ipsum</div>
</div>