Javascript 调整DIV大小，但在调整窗口大小时保持纵横比

我的页面中有一个DIV元素，我想在调整窗口大小时调整它的大小，但要保持方形纵横比。我想将宽度设置为浏览器宽度的50%，高度设置为与宽度相等。我该怎么做

---

如果解决方案需要Javascript，这很好，但我不希望使用jQuery。

我不确定您是否可以将CSS中的一个属性（高度）与另一个属性（宽度）相等。。。至少在css2中是这样

但是你当然可以用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>

document.onresize=函数（）{
var element=document.getElementById（'myDiv'）；//元素
var size=Math.floor（window.innerWidth/2）+“px”；//50%窗宽
element.style.width=size；//设置宽度
element.style.height=size；//设置高度
};

---

请注意，

window.innerWidth

属性不在IE中。在IE中，您必须使用

document.documentElement.clientWidth

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

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

---

在css和window.onresize事件中使用宽度：50%来调整大小。看一看

---

我承认，我只在Opera上测试过这个。你用什么浏览器来帮我调试？除了Opera lol。。。我认为这是因为您在最后两行中引用了div名称，而不是变量名称。否则它会起作用是的，那真的可能是问题所在：D