[英]Jquery/CSS: Full size background image
我目前正在使用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>
以此為中心 -
#container {
margin-left: 50%;
left: -488px;
}
這有點hacky,但它確實有效。
50%移位(根據寬度保持居中)
寬度的一半,加上border = 478.5(或488),使其保持在框架中心。 當然,“左”只能起作用,因為它有位置:相對; 附在它上面
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.