css - 你能使用 CSS calc() 函数使元素的高度与其宽度相匹配吗？我的尝试不起作用

Question

calc() 函数没有像我在代码中预期的那样工作。

高度不是按照容器宽度的 20% 计算的，而是折叠的。

html:

.box {
  width: 20%;
  height: calc(20%);
  margin: auto;
  background-color: olive;
}

<div class="box">
  
</div>

我尝试添加计算，例如“height: calc(20% - 0px);”但高度仍然只是崩溃到零。

谁能看看我是否做错了什么？谢谢!

Answer 1

正如我上面所评论的，高度中的%是相对于父元素的高度，并且使用calc()不会改变行为，因为calc(20%)是与简单的 20% 相同。

此函数将简单地进行一些计算以提供您的属性使用的结果，因此无论有或没有 calc()，逻辑都将始终相同。

您需要为父容器设置高度，以便您的元素具有高度:

.container {
  height: 100px;
}

.box {
  width: 20%;
  height: calc(20%);
  /* same result with the below
  height: calc(20% / 1);
  height: calc(20% - 0px);
  */
  margin: auto;
  background-color: olive;
}

.box-1 {
  width: 20%;
  height: 20%;
  /* same result without calc*/
  margin: auto;
  background-color: red;
}

.box-2 {
  width: 20%;
  height: calc((50% + 20px) / 2);
  /* 50% from parent height = 50px
     50px + 20px = 70px
     70px / 2 = 35px*/
  margin: auto;
  background-color: yellow;
}

<div class="container">
  you will see this element because height is set to container
  <div class="box">
  </div>
  <div class="box-1">
  </div>
  <div class="box-2">
  </div>
</div>
you will not see these elements because no height set to parent container (the body)
<div class="box">
</div>
<div class="box-1">
</div>
<div class="box-2">
</div>

现在，如果您想要元素的高度/宽度之间的关系，您可以考虑使用变量，但它不适用于 % 值:

:root {
  --size-box:200px;
}

.box {
  width: var(--size-box);
  height: calc(0.2 * var(--size-box));
  margin: auto;
  background-color: olive;
}
.big {
   --size-box:400px;
}
.per {
   --size-box:40%;
}

<div class="box">
</div>
<div class="box big">
</div>
we don't see the below one because of the same issue, using % in height and no height specified in parent element
<div class="box per">
</div>

如果你想保持元素的纵横比，你可以检查这个问题:Maintain the aspect ratio of a div with CSS