1

css や javascript/jQuery を使用して、ビューポートを次のように動作させることができます。

ここに画像の説明を入力

現在、以下の css を使用して、背景がビューポート全体をカバーするようにしています。

#background {    
  width: 100%; height: 100%;
  top:0; left:0;
  position: absolute;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;    
  overflow: hidden;
}

しかし、それは私が本当に必要としているものではありません。そのように使用すると、画面の解像度が低い場合、背景画像がゆがみ、見栄えが悪くなります。

編集 明確にするために、私はモバイルユーザーについて心配していません. それは、私が最初に取り組んでいるシステムの目的ではありません。デスクトップシステムになります。

みんなありがとう。

4

2 に答える 2

1

これを試して...

#background {
    background: url('image/myimage.jpg') center center;
}

また

body {
    background: url('image/myimage.jpg') center center;
}

ボディ レベルで背景を設定できる場合は、#background 要素は必要ありません。

ただし、CSS を使用して画像を設定しても画像は拡大縮小されず、「中央の中央」は画像を垂直方向および水平方向の中央に配置します。

画像サイズに関係なく、これは中央に配置されます。ただし、表現した「オーバースキャン」スタイルを取得するには、サポートする最大解像度よりも大きな画像を常に提供する必要があります。

ただし、背景画像を引き伸ばしたい場合は、次の操作を実行できます。JavaScript と jQuery ライブラリを使用する必要があります。

HTML:

<div id="divBackWrapper">
    <div id="divBackCenter">
        <img src="http://www.abc.net.au/radionational/image/4220698-3x2-700x467.jpg" width="700" height="467" />
    </div>
</div>

CSS:

html, body {
    width: 100%; height: 100%;
    padding:0; margin:0;
}

#divBackWrapper, #divBackCenter {
    position: absolute;
    width: 100%; height: 100%;
    overflow: hidden;
}

#divBackCenter {
    overflow: visible;
    top: 50%;
    left: 50%;
}

#divBackWrapper img {
    position: absolute;
    width: 100%; /* change to auto to allow width set by height, one must always be 100% */
    height: auto; /* change to 100% to allow height stretching */
    min-width: 700px;
    min-height: 467px;
    top: -50%; /* half height */
    left: -50%; /* half width */

}

JS:

jQuery(function() {
    $(window).resize(function() {

        var $window = $(window);
        var $img = $("#divBackCenter img");

        if ( $img.width() <= $window.width() ) {
            $("#divBackCenter").removeAttr("style");
            $("#divBackCenter img").removeAttr("style");
            return;
        } else {
            var css = {};
            css.top = -($img.height() - $window.height()) / 2;
            css.left = -($img.width() - $window.width()) / 2;

            $("#divBackCenter").css({top:0,left:0});
            $("#divBackCenter img").css(css);
        }
    });

});
于 2013-05-04T12:16:42.987 に答える
0

バックグラウンドストレッチを簡単に行うために、jquery backstretchを数回使用しました。私はそれがあなたが探していることもすることを知っています。

于 2013-05-04T12:21:03.040 に答える