Javascript 如何使用jQuery调整背景图像的大小

全部！关于使用jQuery调整背景图像的大小，我遇到了两个问题。 首先，我有一个神秘的滚动条。 而且，我无法隐藏溢出图像

我的代码在下面

HTML

<div id="imageBG"></div>  
<div id="container" closs="clearfix">
    <header>
        <div id="header">
            <h1>飯香岡八幡宮</h1>
            <p>0436-41-2027</p>
        </div>
    </header>

    <div id="rightColumn">
    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="#">TOP</a></li>
            <li><a href="#">NEW</a></li>
            <li><a href="#">INTRODUCTION </a></li>
            <li><a href="#">MAP</a></li>
            <li><a href="#">SPECIAL</a></li>
        </ul>
        </nav>

  <div id="content" role="main">

  </div><!-- end #content -->
</div><!-- end #rightColumn -->

  <footer>

  </footer>

</div><!-- end #conteiner -->

  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

  <!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- end scripts -->

  <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
       mathiasbynens.be/notes/async-analytics-snippet -->
  <script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>
</body>
</html>

JavaScript

$( document ).ready( function() {

    // Adjust the window 
    $.event.add( window, 'resize', adjustImageBGAndGrid );

});

function adjustImageBGAndGrid() {

    var windowHeight = $(window).height(),
    windowWidth = $(window).width(),
    containerHeight = $( '#container' ).height() + 300,
    ratio = 1280 / 720;


    // adjust the container and body height so we scroll correctly
    // in most major browsersm including iPad
    if (windowHeight < containerHeight ) {
        $( 'body' ).css( 'height', containerHeight );
    } else {
        $( 'body' ).css( 'height', windowHeight );
    }

    // adjust the size of the background grid image and video
    if ( Math.round( ( windowWidth / windowHeight ) ) < ratio ) {
        $( '#imageBG' ).css( {
            'width': 'auto',
            'height': '100%',
            'left': '0px',
            'right': '0px',
            'top': '0px',
            'bottom': '0px'
        });
    } else {
        $( '#imageBG' ).css( {
            'width': '100%',
            'height': 'auto',
            'left': '0px',
            'right': '0px',
            'top': '0px',
            'bottom': '0px'
        });
    }
}

$（文档）.ready（函数（）{
//调整窗户
$.event.add（窗口“调整大小”，调整ImageBGandGrid）；
});
函数adjustImageBGAndGrid（）{
var windowHeight=$（window）.height（），
windowWidth=$（window）.width（），
容器高度=$（“#容器”）.height（）+300，
比率=1280/720；
//调整容器和车身高度，以便正确滚动
//在包括iPad在内的大多数主要浏览器中
if（窗高<集装箱高度）{
$（'body'）.css（'height'，containerHeight）；
}否则{
$（'body'）.css（'height'，windowHeight）；
}
//调整背景网格图像和视频的大小
if（数学圆（（窗宽/窗高））<比率）{
$（'#imageBG'）.css（{
“宽度”：“自动”，
“高度”：“100%”，
“左”：“0px”，
“右”：“0px”，
“顶部”：“0px”，
“底部”：“0px”
});
}否则{
$（'#imageBG'）.css（{
“宽度”：“100%”，
“高度”：“自动”，
“左”：“0px”，
“右”：“0px”，
“顶部”：“0px”，
“底部”：“0px”
});
}
}

我需要一些帮助和提示。谢谢合作

编辑

我刚得到你真正需要的：

基于本教程：

---

代码太多了。你为什么不提供一个指向该页面的URL，这样我们就可以看到你的背景图片？编辑了答案，我的第一个答复完全没有问题。谢谢，rmagnum2002！不客气，多亏了你的问题，我解决了我的一个问题，找到了本教程。

$( document ).ready( function() {

    // Adjust the window 
    $.event.add( window, 'resize', adjustImageBGAndGrid );

});

function adjustImageBGAndGrid() {

    var windowHeight = $(window).height(),
    windowWidth = $(window).width(),
    containerHeight = $( '#container' ).height() + 300,
    ratio = 1280 / 720;


    // adjust the container and body height so we scroll correctly
    // in most major browsersm including iPad
    if (windowHeight < containerHeight ) {
        $( 'body' ).css( 'height', containerHeight );
    } else {
        $( 'body' ).css( 'height', windowHeight );
    }

    // adjust the size of the background grid image and video
    if ( Math.round( ( windowWidth / windowHeight ) ) < ratio ) {
        $( '#imageBG' ).css( {
            'width': 'auto',
            'height': '100%',
            'left': '0px',
            'right': '0px',
            'top': '0px',
            'bottom': '0px'
        });
    } else {
        $( '#imageBG' ).css( {
            'width': '100%',
            'height': 'auto',
            'left': '0px',
            'right': '0px',
            'top': '0px',
            'bottom': '0px'
        });
    }
}