Question

我的页面中有一个DIV元素，我希望在调整窗口大小时调整大小，但保持方形宽高比。我想将宽度设置为浏览器宽度的50％，并将高度设置为等于宽度。我怎么能这样做？

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

Answer 1

在css和window.onresize事件中使用width：50％调整大小。看看

Answer 2

我不确定你可以在CSS中使一个属性（height）等于其他属性（宽度）......好吧，至少在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>

请注意，IE中不存在window.innerWidth属性。在那里，你必须使用document.documentElement.clientWidth。

Answer 3

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

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

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

3 个答案: