Resize Div，同时保持比例

我试图创建一个页面，其中居中放置的div调整大小以适合页面水平和垂直同时保持比例。Resize 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); 

});

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>

来源

2012-08-05 RobM

我个人定位我的中心div的水平和垂直方向使用定位/余量的组合与特定的液体的宽度和高度。它会根据页面宽度调整大小而不使用JavaScript。这是一个例子。

http://jsfiddle.net/9Aw2Y/

来源

2012-08-05 18:54:02 Kwon

虽然这确实调整基于浏览器的大小在div，我需要保持DIV的大小相同的比率，特别是1：1.5的高宽 - 的CSS方法不保持该比值。 – RobM 2012-08-05 22:15:37

在这种情况下，我会使用jQuery来调整文档加载的CSS。我会将div的高度发送给一个变量，并改变元素的'.css（）'宽度（即'.css（'width'，'x * 1.5'）;'）以及元素左边距的长度（'.css（'left'，' - x * .75'）;'）。 – Kwon 2012-08-06 02:08:47

漂亮的小中心式 - 即使它没有解决问题.. – T4NK3R 2014-02-14 11:48:06

Resize Div，同时保持比例

回答

相关问题