javascript - 调整 DIV 大小但在调整窗口大小时保持纵横比

Question

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

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

Answer 1

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

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';
}