在调整窗口大小时调整DIV大小但保持长宽比

Question

我的页面中有一个DIV元素，当窗口调整大小时，我想要调整其大小，但保持宽高比为正方形。我想将宽度设置为浏览器宽度的50％，高度等于宽度。我怎样才能做到这一点？

如果解决方案需要JavaScript，那很好，但我不想使用jQuery。

Answer 1

使用宽度：在CSS 50％，并调整大小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

您可以将宽度设置为CSS中窗口的50％ 你只需要调整高度 -

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