如何设置高度取决于宽度百分比 - 纯CSS [复制]

Question

这个问题已经在这里有一个答案：

• Maintain the aspect ratio of a div with CSS 22个回答

我有屏幕宽度的50％的股利。它里面我想谈四个方形：

<div style="width:50%">
  <div style="width:25%"></div>
  <div style="width:25%"></div>
  <div style="width:25%"></div>
  <div style="width:25%"></div>
</div>

但我不知道如何计算它们的高度。我不想用js。

Answer 1

取而代之的百分比，有你的内心divs使用viewport-percentage lengths：

<div style="width:50%;background-color:red;">
    <div style="width:25vw;height:25vw;background-color:blue;"></div>
    <div style="width:25vw;height:25vw;background-color:green;"></div>
    <div style="width:25vw;height:25vw;background-color:blue;"></div>
    <div style="width:25vw;height:25vw;background-color:green;"></div>
</div>

（背景色为演示的目的。）