비율을 유지하면서 비율 조정

Question

비율을 유지하면서 페이지 중앙에 배치 된 div가 가로 및 세로로 맞도록 크기를 조정하는 페이지를 만들려고합니다.

현재 저는 특히 JS와 CSS의 조합을 사용하고 있습니다. 특히 효율적이지는 않습니다. 약간의 해킹 인 것처럼 보입니다.

이 코드를 정리하거나이를 다시 작성하려면 어떻게해야합니까?

자바 스크립트

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에 배치 할 것 및 신장. 그것은 자바 스크립트를 사용하지 않고 페이지 너비에 따라 크기가 조정됩니다. 여기에 예제가 있습니다. 이 브라우저의 크기에 따라 DIV의 크기를 조정하지 동안

http://jsfiddle.net/9Aw2Y/