CSS 无法保持 div 的纵横比（padding-top 不起作用）

Question

我不知道怎么做，但我已经弄了好几个小时了，还是想不通。

我正在尝试使 div 具有 1:1 的固定宽高比，但 padding-top 技巧不起作用。

这是我的代码：

HTML:

<div class="test">
  <div/><div/><div/><div/>
</div>

CSS:

.test {
  width: 50px;
  height: 0px;
  padding-top: 100%;
  background: blue;
}

谁能知道我做错了什么？

编辑：我应该说清楚宽度可以是任何东西

Answer 1

在其周围添加一个具有设定宽度的包装器元素将使您获得所需的结果：

<div class="test__outer">
  <div class="test">
    <div/><div/><div/><div/>
  </div>
</div>

css:

.test {
  height: 0px;
  padding-top: 100%;
  background: blue;
}

.test__outer {
  width: 50px;
}

这是因为预填充是根据包含块的宽度计算的，而不是您要设置填充的块： https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Values

CSS Cannot keep aspect-ratio of div (padding-top not working)