Depois de analisar o código da Zurb Foundation, percebi que eles usavam uma abordagem CSS como essa para permitir um div quadrado responsivo:

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

Eu tenho usado essa abordagem em alguns projetos mais recentes (ainda em dev privado), mas não sei o suporte do navegador para ele ou porque a altura é ainda capaz de imitar o tamanho da largura. Alguém sabe por que isso acontece? Obrigado!