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

这适用于百分比宽度和屏幕调整大小的自动调整。

$(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 回答
2

这在当前的 CSS 规则中是不可能的。您可以重复一次，或永远重复。另一种方法是缩小包含元素的大小以适应 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 回答
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 回答