Nachdem ich den Code der Zurb Foundation durchgesehen hatte, bemerkte ich, dass sie einen CSS-Ansatz wie diesen verwendeten, um ein responsives Square Div zu ermöglichen:

.div{
    position:relative;
    width:33%;
    height:0;
    padding-bottom:33%;
}
.divInner{
    position:absolute;
    width:100%;
    height:100%;
}

Ich habe diesen Ansatz für einige neuere Projekte verwendet (noch in privater Entwicklung), kenne aber die Browserunterstützung dafür nicht oder weiß nicht, warum die Höhe sogar die Breitengröße imitieren kann. Weiß jemand, warum das passiert? Vielen Dank!