Как установить высоту 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, я был бы рад также использовать это.
jsПримечание выше для справки.
Кто-нибудь может мне помочь?