Измените размер DIV, но сохраните пропорции при изменении размера окна

Question

У меня есть элемент DIV на моей странице, который я хочу изменить при изменении размера окна, но поддерживаю квадратное соотношение сторон. Я хочу, чтобы ширина была равна 50% ширины браузера, а высота была равна ширине. Как я могу это сделать?

Если для решения требуется Javascript, это нормально, но я бы предпочел не использовать jQuery.

Answer 1

Использование ширина: 50% в CSS и window.onresize событие для изменения размера. Взгляните

http://jsfiddle.net/536UJ/

Answer 2

Я не уверен, что вы можете сделать одно свойство (высота) равна другой собственности (ширина) в CSS ... ну, по крайней мере, в CSS 2.

Но вы, конечно, можете сделать это в JavaScript ,

<div id = "myDiv"></div> 
<script> 
    document.onresize = function() { 
     var element = document.getElementById('myDiv');  // the element 
     var size = Math.floor(window.innerWidth/2) + 'px'; // 50% window width 

     element.style.width = size; // set the width 
     element.style.height = size; // set the height 
    }; 
</script> 

Обратите внимание, что свойство window.innerWidth нет в IE. Там вам нужно будет использовать document.documentElement.clientWidth.

Answer 3

Вы можете установить ширину 50% окна в css; вам просто нужно настроить по высоте

window.onresize=function(){ 
    var who= document.getElementById('divtoresize'); 
    who.style.height=who.offsetWidth+'px'; 
}