Works on almost all browsers.
You can try giving
padding-bottom as a percentage.
<div style="height:0;width:20%;padding-bottom:20%;background-color:red"> <div> Content goes here </div> </div>
The outer div is making a square and inner div contains the content. This solution worked for me many times.
Here's a jsfiddle
~ Answered on 2013-09-28 15:28:49