Как реализовать пропорциональное масштабирование div блока?

Возникла следующая задача, нужно сделать квадрат по центру экрана, который бы пропорционально масштабировался.

Тоесть:
К примеру у нас расширение экрана браузера более 2000px. В центре расположен квадрат исходя из этого:

#table {
    width: 100%;
    max-width: 1024px;
    min-width:424px;
    height:770px;
    position: relative;
    margin: 0 auto;
    border: solid 1px red;
}

1024px на 770px

если расширение браузера к примеру уменьшается и становиться 900px, то данный квадрат получит следующие атрибуты:
width: 900px(100%) а вот height должно быть пропорционально width. Тоесть нужно при каждом ресайзе вычислять height таким образом, что бы он был пропорционален width

Подскажите пожалуйста как это можно сделать?