3

現在、背景画像を設定するための 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/インライン 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>
4

1 に答える 1

2

これはそれを中心にしています -

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

ちょっとハックですが、動作します。

50% シフト (幅に基づいて中央に配置するため)

フレームの中央に配置するには、幅の半分に境界線を加えて = 478.5 (または 488) にします。そしてもちろん、"left" は position: relative; があるためのみ機能します。それに付属

于 2012-08-03T21:27:54.787 に答える