0

次のスライド (Web ページ) に移動する左右の矢印が付いた jquery スライダーを持つ Web サイトを作成しました。すべてのコンテンツは 1 つの Web ページに含まれ、ハッシュを使用します。 http://www.ilandeistudio.com

ページごとに異なる全画面背景 (ハッシュ) が必要だったので、ここで見つけた DIV に全画面背景を配置する CSS 手法を使用しました (CSS 手法 1) http://css-tricks.com/perfect-full-ページ背景画像/

これは機能しますが、画像の高さが画面の下部からはみ出しているため、垂直スクロールバーが追加され、背景画像全体が表示されません。背景を少し歪ませても構いません (すべて w1024px x h682px です)。表示可能な領域に画像全体を表示したいだけです。

私はそれをCSSで動作させることができませんでした。誰かが提案を持っているかどうか教えてください。そうでなければ、誰かがjqueryソリューションを推奨できるかもしれません。しかし、これらのjqueryの例のほとんどを複数のハッシュのDIV内で機能させる方法がわかりません。

現在使用しているCSSは次のとおりです。

        img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: absolute;
        top: 0;
        left: 0;
    }

    @media screen and (max-width: 1024px){
        img.bg {
            left: 50%;
            margin-left: -512px; }
    }

2 つのスライドの例を次に示します。

               <div id="home" class="slide">
                <img src="images/bg_home1.jpg" class="bg">
          <div class="outer-wrapper">
                  <div class="inner-wrapper">
                        <div class="header">
                            <a href="#home" class="special-anchor"></a>

                            <div class="nav">
                                <a href="#" class="prev-button special-anchor" title="Previous">Previous</a>
                                <span class="rightnav"><a href="#" class="next-button special-anchor" title="Next">Next</a></span>
                            </div>
                        </div>
                        <div class="content">
                                test content
                        </div>
                        <!--Content ends-->
                    </div>
                </div>
          </div>

          <div id="about" class="slide">
                <img src="images/bg_about1.jpg" class="bg">
                <div class="outer-wrapper">
                  <div class="inner-wrapper">
                        <!--Header starts-->
                        <div class="header">
                            <a href="#about" class="special-anchor"></a>
                            <!--Navigation starts-->
                            <div class="nav">
                                <a href="#" class="prev-button special-anchor" title="Previous">Previous</a>
                                <span class="rightnav"><a href="#" class="next-button special-anchor" title="Next">Next</a></span>
                            </div>
                            <!--Navigation ends-->
                        </div>
                        <!--Content starts-->
                        <div class="content">
                        test content 02
                        </div>
                        <!--Content ends-->
                    </div>
                </div>
          </div>
4

1 に答える 1

1

コード自体は正しいようです。含まれていませんでしたが、確認したいのは、リストしたヘッダーとナビゲーションが、左にフローティングしてマージンを使用して配置するのではなく、ページ上に絶対に配置されていることです。これにより、ページの 100% にスペースが追加されます。

そのため、画像自体がページの高さまで拡大され、その上にヘッダーとナビゲーションの高さが追加されています。これらのオブジェクトの高さをスクロールしているように見える場合は、おそらくそれが問題です。

于 2013-01-06T02:00:37.660 に答える