Jquery/CSS:全尺寸背景图像

Question

我目前正在使用一个jquery插件来设置我的背景图像。我遇到的问题是CSS/JQuery使页面成比例。我的内容位于#containerdiv中，因此我将其位置设置为绝对（最初是相对的）。如何使页面内容居中对齐并保持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/InlineJS调用函数

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

Answer 1

这使它居中-

#container { 
    margin-left: 50%;
    left: -488px;
}

这有点老套，但很管用。

50%偏移（根据宽度保持居中）

宽度的一半，加上边框=478.5（或488）以保持其在框架中居中。当然，使用"left"只能因为它有位置：相对；附加到