我目前正在使用一个 jquery 插件来设置我的背景图像。我遇到的问题是 CSS/JQuery 使页面不成比例。我的内容位于#container
div 内,因此我将其位置设置为绝对(最初是相对的)。如何让页面内容居中对齐并保持 100% 高度的属性?例子
这是在 jquery 插件之前 - CSS 100% 高度 -示例
Jquery后台插件
<script>
(function($) {
$.fn.fullBg = function(){
var bgImg = $(this);
function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height();
var winwidth = $(window).width();
var winheight = $(window).height();
var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;
var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight;
if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px'
});
}
}
resizeImg();
$(window).resize(function() {
resizeImg();
});
};
})(jQuery)
</script>
与问题相关的 CSS
#container {
position: relative;
margin: 0 auto;
width: 945px;
background: #f0f0f0;
height: auto!important;
height: 100%;
min-height: 100%;
border-right: 15px solid #000;
border-left: 15px solid #000;
}
.fullBg {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
HTML/Inline JS 调用函数
<img src="images/raven_bg.jpg" alt="" id="background" />
<div id="container">
</div>
<script>
$(window).load(function() {
$("#background").fullBg();
});///this comes right before the closing body tag
</script>