Javascript 我怎样才能进行div'；采用响应式设计，高度和宽度是否相同？

我正在做一个反应灵敏的设计，我很难让一些div的高度和宽度都相同。起初，我将div的宽度设置为一个百分比，并将其高度更改为“自动”，但这只会导致div不显示。在这个例子中，我必须有一个固定的像素高度，以允许div的显示。我无法通过使用简单的图像来解决这个问题，但是我必须使用div内部的背景图像，这些图像需要具有与相同的响应速度和高度。当我重新调整浏览器的大小时，我需要div将大小更改为正方形而不是矩形。我怎样才能做到这一点

---

在JSFIDLE上，可以使用缩短的url找到以下示例，

尝试此JSFIDLE中的方法

---

使用

padding bottom

作为元素所需的高度百分比，然后将

height

设置为

0

并将

width

设置为与

padding bottom

相同的值，在jsfiddle.net中创建一个简单的演示，使用流体css作为宽度框架…可以通过窗口中的脚本调整高度handlerI尝试了这种技术，但元素仍然消失了。如果在这个div中有另一个div，它具有相对位置和z索引，这会影响主div在设置高度时不显示吗？如果是，原因是什么？下面是一个我正在谈论的工作示例：