如何使用響應式設計使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。