2

Twitter ブートストラップを使用して Web ページを作成しました。次のように、CSS を使用して背景に画像を挿入しました。

<div class="container-fluid">
    <div class="row-fluid">
        <section id="wrapper">

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

CSS は次のとおりです。

section#wrapper{ 
    max-width:700px; 
    background-image:url("img/crane.png");
    min-height:525px;
}

ブラウザのサイズを変更しても、画面サイズに応じて画像のサイズが変更されません。レスポンシブにする方法がわかりません。ですから、この問題を解決するために私を助けてください。前もって感謝します。

4

4 に答える 4

5

これを試して

section#wrapper{ 
    background:url("img/crane.png") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
于 2013-06-10T08:28:29.060 に答える
2

Web サイトの全ページレスポンシブ背景画像のプロパティではなく、値としてCSS3background-sizeを使用できます。cover100%

html { 
  background: url(bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

詳細については

于 2013-06-10T07:34:02.860 に答える
2

background-sizeプロパティを使用coverして、次の略記で like に設定する必要があります。

div.withBackground {
    background:  url('http://image.url/img.png') center center cover;
}

ここでもっと読む

于 2013-06-10T07:31:35.417 に答える
1

これを試してbackground-size:100%;

ただし、すべてのブラウザが動作するわけではありませんが、ブラウザの下位バージョンは認識されませんbackground-size

于 2013-06-10T07:32:19.747 に答える