I am currently working on a responsive design and facing challenges in making div's height and width equal. Initially, I set the div's width as a percentage and height as auto, but this caused the divs to not display properly. To resolve this issue, I had to assign a fixed pixel height to the divs for them to show correctly. I cannot solve this problem with simple images; instead, I must use background images inside the divs that need to be responsive with equal width and height. As I resize the browser window, I want the divs to maintain their proportions as squares rather than rectangles. How can I accomplish this?
To see an example of this issue on jsFiddle, visit