Question

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

目前我正在使用JS和CSS的组合，虽然我不确定它是否特别有效 - 它似乎有点hacky。

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

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

});

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/

调整Div，同时保持比率

1 个答案: