1

全て！jQuery で背景画像のサイズを変更する際に 2 つの問題が発生しました。まず、不思議なスクロール バーがあります。そして、オーバーフロー画像を非表示にすることはできません。

私のコードは以下です...

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>

CSS

#container {
    margin: 0 auto;
    padding: 0 auto;
    width: 98%;
    min-width: 1250px;
    height: 100%;
    position: fixed;
    z-index: 15;
}

#imageBG {
    width: 100%;
    height: 100%;
    background-image: url( '../img/theme_bg.jpg' );
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    overflow: hidden;
}

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'
        });
    }
}

助けとヒントが必要です。ご協力ありがとうございました！

4

1 に答える 1

0

編集

本当に必要なものを手に入れました：

http://jsfiddle.net/KqQJX/1/

このチュートリアルに基づいて：

http://unstoppablerobotninja.com/entry/fluid-images

于 2012-05-01T11:29:14.060 に答える