在保持比例的同时调整Div的大小

Question

我正在尝试创建一个页面，在该页面中居中放置的div会调整大小以适合水平和垂直页面，同时保持比例。

目前，我不确定使用JS和CSS的组合是否特别有效-似乎也有些怪异。

我如何清理此代码或重写它以实现此目的？

Java脚本

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); 

});

的CSS

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

的HTML

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

Answer 1

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

http://jsfiddle.net/9Aw2Y/