html - CSS无法保持div的长宽比(填充顶部无效)

This question already has answers here:

Maintain the aspect ratio of a div with CSS
                                
                                    （23个答案）
                                
                        
                        
                            Height equal to dynamic width (CSS fluid layout) [duplicate]
                                
                                    （9个答案）
                                
                        
                        
                            Responsively change div size keeping aspect ratio [duplicate]
                                
                                    （5个答案）
                                
                        
                                2年前关闭。
            
                    
我不知道如何，但我已经待了几个小时了，无法弄清楚。

我正在尝试使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/

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

最佳答案

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

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

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

关于html - CSS无法保持div的长宽比(填充顶部无效)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53728656/