如何使用响应式设计使div的高度和宽度相同？

Question

我正在开发一个响应式设计，并且我很难尝试使div的高度和宽度都相同。起初我将div的宽度设为百分比并将其高度更改为auto，但这只会导致div不显示。在这个例子中，我必须有一个固定的高度（以像素为单位）才能显示div。我无法通过使用简单的图像来实现这个问题，但是我必须使用div内部的背景图像，这些图像需要响应时具有相同的响应和高度。当我重新调整浏览器大小时，我需要将div更改为正方形而不是矩形。我怎样才能做到这一点？

关于jsFiddle的以下示例，可以使用缩短的网址http://bit.ly/ZLiBm2

找到

Answer 1

尝试此jsFiddle http://jsfiddle.net/ZYTST/

中的方法

使用padding-bottom作为元素所需高度的百分比，然后将height设置为0，将width设置为padding-bottom的相同值。