Javascript 调整Div大小，同时保持比率

我正在尝试创建一个页面，其中一个中央放置的div可以调整大小以适应页面的水平和垂直方向，同时保持比例

目前，我正在使用JS和CSS的组合，尽管我不确定它是否特别有效——它似乎也有点黑客

我如何清理这段代码或者重写它来实现这一点

Javascript

function changesize(){

var $width = $(".aspectwrapper").height();
var $changewidth = $width * 1.5;
var $doc = $(document).width();
var $height;

if ($doc <= $changewidth){ $changewidth = ( $doc - 100 );
$height = ( ($doc - 100) / 1.5 );
$(".aspectwrapper").css('height', "" + $height + "");
};


$(".content").css('width', "" + $changewidth + "");
$(".aspectwrapper").css('width', "" + $changewidth + "");
};

$(document).ready(function(e) {

 $(changesize); 

});

$(window).resize(function(e) {

$(changesize); 

});

HTML

内容在这里

我个人会使用具有特定液体宽度和高度的定位/边距组合来水平和垂直定位我的中心div。它将根据页面宽度调整大小，而不使用javascript。这里有一个例子

---

虽然这会根据浏览器大小调整div大小，但我需要保持div大小的相同比例，特别是1:1.5的高宽比-css方法不会保持这个比例。在这种情况下，我会使用jQuery在文档加载时调整css。我会将div的高度发送给一个变量，并将元素的

.css（）

更改为宽度（即

.css（'width'，'x*1.5'）；

）以及元素的左边距长度（

.css（'left'，'-x*.75'）；

）。

html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.aspectwrapper {
display: inline-block; 
position: relative; 
margin: 0 auto;
height: 90%;
border: #F00 1px solid;
background-color: #F00;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin-top: 60px;
outline: thin dashed green; 
overflow: hidden;
background-color: #09C;
}
#wrapper {
width: 100%;
height: 100%;
text-align: center;
background-color: #0F3;
float: left;
}

<div id="wrapper">
      <div class="aspectwrapper">
                <div class="content"> CONTENT GOES HERE</div>
      </div>
      <div style="clear:both;"></div>
</div>