Po przejrzeniu kodu Zurb Foundation zauważyłem, że używają takiego podejścia CSS, aby umożliwić responsywny kwadrat div:

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

Korzystam z tego podejścia w niektórych nowszych projektach (nadal w prywatnym dev), ale nie znam obsługi przeglądarki lub dlaczego wysokość może nawet naśladować rozmiar szerokości. Czy ktoś wie, dlaczego tak się dzieje? Dzięki!