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

[RichardLQ]

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?My code for this example can be found at: https://github.com/jdmagic21/coded_container/blob/master/main.css and the particular class can be found on lines 79-86.