0

だから私はここで助けが必要です。

この設定を行ったのは、内部に配置されている div を常にフルスクリーン (サイズに合わせて拡大縮小) するためにいくつかの画像が必要だったからです。これは私がどこまで来たかであり、何をしても機能しません。誰かがこれを修正するのを手伝ってくれることを本当に願っています。私はこのようなコードを入れようとしました

background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

しかし、その後、画像が消えます...これがm全体のコードです。

HTML

<div class="wrapper">
    <div class="navigation_top">
    <ul>
        <li>Btn_1</li>
        <li>Btn_2</li>
        <li>Btn_3</li>
        <li>Btn_4</li>
        <li>Btn_5</li>
    </ul>
    </div>

    <div class="navigation_side">
       <ul>        
          <li><a href="#slice1" id="btn_1" class="anchorLink">slice1</a></li>
          <li><a href="#slice2" id="btn_2" class="anchorLink">slice2</a></li>
          <li><a href="#slice3" id="btn_3" class="anchorLink">slice3</a></li>
           <li><a href="#slice4" id="btn_4" class="anchorLink">slice4</a></li>
           <li><a href="#slice5" id="btn_5" class="anchorLink">slice5</a></li>
       </ul>
    </div>

    <div id="slice1"></div>
    <div id="slice2"></div>
    <div id="slice3"></div>
    <div id="slice4"></div>
    <div id="slice5"></div>
</div>

CSS

html, body {height:100%; color:#FFF;}

ul, ol, li {margin:0px!important; padding:0px!important;}

.wrapper {width:100%; height:100%;}
.navigation_top {width:100%; height:50px; line-height:50px; background-color:#000; opacity:.5; position:fixed;}
.navigation_top ul {list-style:none;}
.navigation_top ul li {float:left; width:100px; text-align:center;}
.navigation_top ul li a {display:block; color:#FFF; text-decoration:none;}



.navigation_side {width:200px; height:auto; position:fixed; background-color:#000; opacity:.5; margin-top:10%;}
.navigation_side ul li a {color:#FFF; text-decoration:none;}


#slice1 {width:100%; height:100%; background:url(http://img405.imageshack.us/img405/6018/image1uii.jpg);}
#slice2 {width:100%; height:100%; background-color:#999;}
#slice3 {width:100%; height:100%; background-color:#888;}
#slice4 {width:100%; height:100%; background-color:#777;}
#slice5 {width:100%; height:100%; background-color:#666;}

Jクエリ

jQuery(document).ready(function($) {

    $(".anchorLink").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });

    $('.navigation_top').hide();

    $(window).scroll(function() {
        // the 10 below is the number of pixels down to show the menu
        if ($(this).scrollTop() > 10) $('.navigation_top').show();
        else $('.navigation_top').hide();
    });
});

また、ここに私の進歩のフィドルがあります：http://jsfiddle.net/iBertel/qLTQ9/

4

1 に答える 1

0

これが画面に合わせるのに最適な方法だと確信していますか? 画像の解像度に関する懸念のため、私は少し違った方法でアプローチします。

私が行う方法は、最初に画面の幅/高さを確認することです。次に、それを画像の幅/高さと比較します。次に、画像が画面よりも大きい場合は、圧縮して画面に合わせることができます。

画像が画面よりも小さい場合は、画像を div の中央に配置し、div の背景色を適切な色に設定します (たとえば、サイトの色と一致する場合は黒い div にするなど)。

画面の幅と高さを比較して、画像の幅/高さを確認する必要があることに注意してください。たとえば、画像が画面に対して幅が広すぎるが、高さがそれほど高くない場合、画像は幅/高さの比率を維持して縮小する必要があるため、div 内に水平の長方形として表示されます。これにより、画像が歪むことはありません。

于 2012-11-15T17:44:29.287 に答える