0

何らかの理由で、画像をブラウザ全体で 100% 幅に広げることができません。

ここで私のサイトを見つけることができます。

私のdivは次のとおりです。

    <div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); 
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; "> 
    </div>

どんな助けでも大歓迎です。

4

5 に答える 5

1

あなたのウェブサイトでは、div をページ幅全体に広げます。ただし、次のようにしない限り、背景画像は引き伸ばされません。

background-size: 100%;
于 2012-08-06T14:06:00.267 に答える
0

この CSS プロパティを使用します

background-size:100% 560px;

これは、背景画像を幅 100% に拡大する必要があることを示していますが、高さは 560px です。

于 2012-08-06T14:08:26.767 に答える
0

ブラウザーのウィンドウに合わせて画像を拡大するという考えは好きではありません。これは、サイトがどのように表示されるかについてクライアントのマシンに依存するためです。

したがって、そのような解決策を探すことはお勧めしません。それよりも：

  • 繰り返し画像を背景として使用する
  • イメージ コンテナーのサイズを修正します。あなたが作成しようとしている効果はまだかなりクールに見えます
  • 画面サイズを検出し、解像度に応じて背景を変更します。
于 2012-08-06T14:25:03.157 に答える
0

背景画像は、それらを含む要素のサイズでサイズ変更されません。使わない理由

<img class="home" src="http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg" 
  style="background-attachment: fixed; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; "> 
</div>

プロパティを削除します

height: 560px;

?

于 2012-08-06T14:06:40.133 に答える
0

追加background-size: 100% auto;

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); 
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% auto;"> 
    </div>
于 2012-08-06T14:07:37.703 に答える