在調整窗口大小時調整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'; 
}