Установите высоту div равной половине ширины. ⇐ Jquery

[Anonymous]

Как я могу установить высоту div, равную ровно половине ширины, если ширина будет меняться в зависимости от размера экрана пользователя?

У меня есть следующий набор в div...

Код: Выделить всё

#div1 {
min-width:400px;
width:100%;
max-width:1200px;
height:400px;
background-color:red;
}

Ширина в этом случае работает нормально: она фиксируется на уровне 400 пикселей, если экран становится слишком узким, и также перестает расширяться на 1200 пикселей, если экран становится слишком большим. Но я также хочу, чтобы высота в любой момент времени менялась ровно на половину ширины. Что-то вроде...

Код: Выделить всё

#div1 {
min-width:400px;
width:100%;
max-width:1200px;
height:width/2;
background-color:red;
}

Это не сработало (чего я на самом деле не ожидал).

Я бы предпочел использовать CSS, если это возможно, но мне также хотелось бы, чтобы высота менялась, если пользователь также вручную настраивает размер окна Интернета (например, то, что происходит с шириной в данный момент). Я не уверен, что это возможно с помощью CSS, однако, если есть способ добиться этого с помощью Jquery, я бы тоже был рад использовать его.

jsFiddle из приведенного выше для справки.

Может ли кто-нибудь мне помочь?

Подробнее здесь: https://stackoverflow.com/questions/176 ... e-width-is