1

うーん、

私は長い間この問題に取り組もうとしてきました....助けてください。

そのため、css/html のみを使用して背景画像を設定しようとしています。画像は非常に大きいので、いつでも縦横比に完全に収まるように縮小したいと考えています。ここからいくつかの提案を試しても、stackoverflow全体を検索しました：

CSS の背景画像は幅、高さに合わせて自動スケーリングする必要があります。

しかし、何も機能していません...

私の IE ブラウザでの表示は次のとおりです 。

実際の画像: http://i829.photobucket.com/albums/zz217/prakash911/background_zps92b4855f.png

サンプル テスト DEMO: http://jsfiddle.net/4GkFu/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body style="overflow:hidden;">

        <div id="divimg" style="position:absolute; left:0px; top:0px; right:0px; bottom:0px; overflow:hidden;" >
            <img src="img/background.png" style="position:absolute; left:0px; top:0px; width:100%; height:auto;"/>
        </div>

    </body>
</html>
4

3 に答える 3

1

私が知っていることは..そして多くのウェブサイトでそれを見てきました..背景画像が自動的に拡大縮小されません。どの画面縦横比でもきれいに見えるように中央に配置するだけです。

例えば：

背景画像

Webサイト

于 2013-06-13T18:13:59.790 に答える
-1 
body {
    margin: 0;
    background: red     url('http://i829.photobucket.com/albums/zz217/prakash911/background_zps92b4855f.png') 0 0 no-    repeat;
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;

}

http://jsfiddle.net/4GkFu/6/

于 2013-06-13T18:18:36.717 に答える
-1

ここにフィドルがあります。

http://jsfiddle.net/4GkFu/9/

私がしたことは、塗りつぶそうとしている div の背景画像に画像を移動することだけでした。

これがあなたの望むものかどうかわかりません

<body style="overflow:hidden;">
    <div id="divimg" style="position:absolute; left:0px; 
top:0px; right:100px; bottom:0px; overflow:hidden;
background-image: url('http://i829.photobucket.com/albums/zz217/prakash911/background_zps92b4855f.png'); background-size: contain;
background-repeat: no-repeat;
"></div>
</body>

background-size を含むように設定したい

于 2013-06-13T18:15:04.387 に答える