2

このサイトは BODY に「min-width:600px」があり、中央に backgroundImage を使用しています。

サイズを変更して600px未満になると、スクロールバーが作成されます。しかし、背景はそれを中央に配置するために停止しません..背景は最小幅を無視します。

ここでの私の例: http://jsfiddle.net/XD4QM/

<html>
    <body>
        <div>
            background ignores the min-width

        </div>
    </body>
</html>



body{
    min-width:600px;
    background:url(http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg) center top;

}

追加情報:

私はかなり大きくて悪いウェブサイトを修正する必要があります..最初の動きのように、これをやりたいです..このサイトは、人の幅が1024px未満の場合（600は単なる例です）、ひどく見えます. したがって、私は水平スクロールを使用し、サイトを min-width:1024px にして、サイトを破壊しないことを好みます。すべてを作り直して修正するまで、クライアントを満足させ続けるためだけに。

4

4 に答える 4

1

私の場合は、今このようにして作業しました。

@media screen and (max-width :600px){
    body{
        background-position:-<tested value>px 0px;
    }
}
于 2013-02-13T16:20:28.003 に答える
1

更新 2:

jsfiddle.net/persianturtle/XD4QM/5

body{
    width:600px
    margin: 0 auto;
}

img {
    max-width:100%;
    min-width:800px;
    display: block; 
    margin-left: auto; 
    margin-right: auto
}

アップデート：

これはどう？

http://jsfiddle.net/persianturtle/XD4QM/3/

制御できない背景に画像を配置する代わりに、制御可能な div 内に画像を配置してみませんか?

img {
    max-width:100%;
}

バックグラウンドの繰り返しを停止するようブラウザに指示していません。

このjsFiddleを見てください：

http://jsfiddle.net/persianturtle/XD4QM/2/

body{
    min-width:600px;
    background:url(http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg) center top;
    background-repeat:no-repeat;
}
于 2013-02-13T16:18:03.207 に答える
0

「スクロール」と「固定」を切り替えてみてください。background-attachment プロパティは、背景画像を固定するか、ページの残りの部分と共にスクロールするかを設定します。

body{
    min-width:600px;
    background:url(example-last-ones-standing.jpg)
    center
    top
    scroll
    no-repeat;
}
于 2013-02-13T18:24:56.003 に答える
0

まあ、私は上記のアプローチのいずれにも行きませんが、コードを次のように変更します

background:url("http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg") repeat scroll center top / cover transparent;

お知らせトップ/カバー。coverは、背景が常に div に合わせてサイズ変更され、背景が本の表紙として設定されるようにします。この場合、本のサイズを変更すると、表紙のサイズが自動的に変更されます

于 2013-02-13T18:10:12.770 に答える