Здесь один взлом, который вы можете использовать: причуда с CSS заключается в том, что верхнее и нижнее paddings/margin, когда установлено в процентах, вычисляются на основе ширины родительского элемента, а не его высоты.

Итак, если вы хотите квадрат div, который, скажем, составляет 50% от ширины его родительского элемента. Чтобы сделать его квадратным, вы просто установите его нижнее дополнение на 50%.

Дело в том, что вам нужно настроить процент заполнения, основанный на ширине div. Если для ширины div установлено 75% от родительского, например, чтобы получить квадрат, вам нужно будет использовать нижнее дополнение 75%.

div {
    background-color: #eee;
    width: 50%;
    height: 0;
    margin-bottom: 40px;
}
.square {
    padding-bottom: 50%; /* (50%*1) */
}
.landscape {
    padding-bottom: 37.5%; /* (50%*(3/4)) */
}
.portrait {
    padding-bottom: 66.6667%; /* (50%*(4/3)) */
}

Здесь сценарий доказуемости: http://jsfiddle.net/teddyrised/Vsj33/