1

次の単純なCSSルールを検討してください。

jsFiddle

div#container {
    width: 50%;
    height: 260px;
    background-image: url('Image.png');
    background-repeat: repeat-x;
}​

問題は、完全な画像だけが必要なことです。別の複製のための十分なスペースがない場合、それは表示されるべきではありません。

CSSがそのルールを提供しているとは聞いたことがありません。では、JavaScriptでそれを実現するにはどうすればよいですか（jQueryはすでに含まれています）？

4

4 に答える 4

2

これは、現在のCSSルールでは不可能です。1回繰り返すことも、永久に繰り返すこともできます。別の方法は、CSS（ページをロードする前の幅がわかっている場合）またはJS（知らない場合）のいずれかで最も近い繰り返しポイントに合うように、含む要素のサイズを縮小することです。

jQueryを使用した後者の意味は次のとおりです。

var $container = $("#container");
var bgImg = extractUrl($container.css("background-image"));
var $img = $("<img />", { "src" : bgImg }).hide().appendTo("body");

$container.width(nearest($("#container").width(), $img.width()));
$img.remove();

function extractUrl(input) {
    // remove quotes and wrapping url()
    return input.replace(/"/g, "").replace(/url\(|\)$/ig, "");
}

function nearest(n, v) {
    n = n / v;
    n = Math.floor(n) * v;
    return n;
}

フィドルの例

于 2012-09-01T15:11:06.880 に答える
2

これはパーセンテージ幅で機能し、画面のサイズ変更で自動調整されます。

$(window).on('load resize', function () {
    var img = $('<img/>');
    img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/0/0c/Fussball.jpg').load(function () {
        var height = this.height;
        var width = this.width;
        var divWidth = $('#containerwrap').width();
        var extra = divWidth % width;
        $('div#container').width(divWidth - extra);

    });
});

div#container {
    width: 670px;
    height: 260px;
    margin:0 auto;
    background: url('http://upload.wikimedia.org/wikipedia/commons/0/0c/Fussball.jpg') left center;
    background-repeat: repeat-x;
}
#containerwrap{
    width:100%;
    height: 260px;
    background-color:#000000;
}

<div id="containerwrap">
  <div id="container">
    Test
  </div>
</div>

http://jsfiddle.net/upjkd/14/show

于 2012-09-01T15:45:39.403 に答える
0

幅はサーバーによって固定されており、サーバーは画像のサイズを認識しているので、画像を正しく作成して繰り返しを忘れたり、幅を適切なサイズにして、画像の整数に収まるようにしてみませんか？

于 2012-09-01T15:18:57.487 に答える
0

http://jsfiddle.net/upjkd/10/を参照してください

var img=document.createElement('img');
img.src="http://upload.wikimedia.org/wikipedia/commons/0/0c/Fussball.jpg";
document.body.appendChild(img);
var con=document.getElementById('container'),
    numImages=Math.round(con.clientWidth/img.clientWidth);
con.style.backgroundSize=con.clientWidth/numImages+'px';
document.body.removeChild(img);

を使用Math.round(con.clientWidth/img.clientWidth)して画像の繰り返し回数を決定し、を使用con.style.backgroundSize=con.clientWidth/numImages+'px'して画像の数がインテグラー（完全な画像のみ）であることを確認できます。

于 2012-09-01T15:26:40.150 に答える