Относительные значения padding-top (проценты, то есть) относятся к ширине.
.нашБлок:after{
padding-top: 100%; /* relative to width! */
content: "";
display: block;
}
Очевидно, что значение может отличаться от 100% и таким образом можно указывать нужное соотношение сторон, которое требуется хранить. А вот контент надо располагать внутри абсолютно, иначе растянет наш элемент как не надо.
Пример без лишних элементов на чистом css:
jsfiddle.net/b282vtp1/1
Анимированно
jsfiddle.net/b282vtp1
И если сама ширина относительная:
jsfiddle.net/b282vtp1/2 
