1

790pxの固定幅の画像を設定するにはどうすればよいですか？完全な画像も表示されている場合、どうすれば応答性を高めることができますか？私のコードは次のようなものです。

 <div class="span10 offset1">
                <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <div style="text-align: center">
                            <ul class="nav">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#about">About</a></li>
                                <li><a href="#contact">Contact</a></li>

                            </ul>

                        </div>
                    </div>
                </div>
            </div>
     </div>

私のCSSは：

.navbar-inner{


    background-color: transparent;
    background-image: url("../img/nav_bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 62px;
    width:88%;
    text-align: center;
    margin: 0 auto;
    min-width: 320px;
    max-width: 790px;
    border: 0;

}

これがiPadやiPhoneで見たときの私の画像です。画像 nav bg を切り取って（両側のボタン）、パーツを表示しています。以下のように.. ウィンドウのサイズ変更後 私が間違っていることは何ですか？

4

1 に答える 1

2

CSS3background-sizeプロパティを使用し、に設定する必要がありますcover。Joãoが指摘したように、これはこのプロパティをサポートするブラウザ（IE9以降、Firefox 4以降、Opera、Chrome、Safari 5以降）でのみ機能します。

HTML

<div class="span10 offset1">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <div style="text-align: center">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
             </div>
         </div>
    </div>
</div>

CSS

.navbar-inner {
  background-size:cover;
}

これが実際の動作を示すjsFiddleです。

于 2013-03-14T17:55:47.303 に答える