How can I make a div's height and width the same using responsive design?

[ehsan]

I am working on a responsive design and am having a difficult time trying to make some div's height and width both the same. At first I made the div's width a percentage and changed its height to auto, however this only caused the div's to not display. In this example I have to have a fixed height in pixels to allow the div's to show. I am not able to acheive this problem with the use of simple images, but instead I must use background images inside of divs that need to be responsive with a equal with and height that are responsive. When I re-size the browser, I need the divs to change size as squares not rectangles. How can I achieve this?An example of the following on jsFiddle, can be found using the shortened url at, http://bit.ly/TqeOpf