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;
}

谁能弄清楚我做错了什么吗？

JSFiddle 链接： http: //jsfiddle.net/ajpgbc0L/

预期结果： http: //jsfiddle.net/ajpgbc0L/2/

编辑：我应该明确表示宽度可以是任何东西

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