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

Question

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

jsFiddle 上的以下示例，可以使用缩短的 url http://bit.ly/ZLiBm2 找到

Answer 1

试试这个jsFiddle里的方法http://jsfiddle.net/ZYTST/

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