jQuery - 可以将背景图像调整为设定大小？答案

【问题标题】：jQuery - possible to resize background-image to a set size?jQuery - 可以将背景图像调整为设定大小？
【发布时间】：2011-01-17 13:55:20
【问题描述】：

我急需将 div 的背景图像调整到特定大小。有谁知道 jQuery 是否可以做到这一点？我知道它需要的大小，它不必根据 div 的大小调整大小。 35,000 张图片已缩放到错误的大小，需要上线，因此无法调整图片大小！

任何建议表示赞赏！

编辑：我只是看看我们是否能够更改 HTML 以将背景图像从 DIV 中取出，并将其放在一个单独的绝对定位的 div 中，其中包含一个 IMG 标记......然后可以使用 CSS 调整 IMG 标记的大小。

【问题讨论】：

是完整的图像还是你使用 CSS 上的“背景”属性来绘制它？（即背景重复）
这是一张完整的图片，需要放在DIV的中间。
您可以在 html 标记中指定高度/宽度，将其调整为您的绝对大小。您是否还可以设置一个 Photoshop 操作并在这些 35k 图像上运行批处理？可能需要一天:)
原始批次是在 Photoshop 动作中完成的，但分辨率为 300dpi。我一直讨厌用 HTML 明确调整大小的图像，想知道人们在想什么……现在我发现自己是同谋。
老实说，我认为您最好的做法是运行另一批并正确调整图像大小。从长远来看，它会让你头疼。

标签： jquery css background-image

【解决方案1】：

您可以使用 CSS3 更改背景大小。实现此功能的浏览器有 Opera、Safari、Chrome、Firefox、Konqueror 和 IE9：

.myClass
{
    -o-background-size: 200px 50px;
    -webkit-background-size: 200px 50px;
    -khtml-background-size: 200px 50px;
    -moz-background-size: 200px 50px;
    background-size: 200px 50px;
}

不确定背景大小的 jQuery 实现。

在这种情况下，也许this article 会帮助你。

【讨论】：

和IE9，使用标准background-size: 200px 50px;
@Kyle 您对“仅”一词的使用给读者的印象是该功能在少数浏览器中实现，而实际上它在除一个浏览器之外的所有浏览器中实现。
...和background-size has options other than fixed length units.
@Šime Vidas：This compatibility chart 很有帮助。
@Cordial：如果这个答案有帮助，你为什么不接受？您知道，“谢谢”评论很好，但表达对 SO 表示感谢的最常见方式是点赞和接受答案。

【解决方案2】：

使用 css：

#myDiv {
            background: transparent url(../../Images/2.jpg);
            background-size: 400% 400%; 
        }

请注意，“400% 400%”给出了宽度和高度。也可以使用“px”或“em”、组合、auto 等。有关更多详细信息，请参阅 CSS3 规范：http://www.w3.org/TR/css3-background/#the-background-size

使用 jquery，您可以像这样更改背景大小：

$('#myDiv').css({
        'background-size': '200% 200%' 
    });

【讨论】：

【解决方案3】：

背景图像只能使用 CSS 3 草案中的功能进行缩放，目前尚未在浏览器中得到广泛支持。

JavaScript 可以解析 CSS，找到背景图像，生成前景图像（<img>），将其设置为绝对位于内容后面并对其进行缩放……但这需要大量工作。

最简单和最可靠的解决方案是使用 ImageMagick 编写一个快速脚本（我可能会为此使用 bash，但 PHP 或任何其他编程语言是选项）以编程方式调整服务器上所有 35,000 个图像的大小。（这也可能是最快的方法）。

【讨论】：

【解决方案4】：

如果背景用作background-image，则不能将它们设置为 100%。我认为这可以在 SO 上找到 1000 次。所以这将进入一些夜间批处理来调整它们的大小。

您还可以创建一些代码来将<img> 标记放在 div 中。然后可以将图像缩放到 100%。为此，您必须向您的 CSS 或 div 询问内容，如下所示：

$('div.niceImage').each(function()
{
    var imUrl = $(this).style('background-image'); // if not in style itself, we should ask it to the CSS rules. Don't know if jQuery does this for you.
    $(this).prepend('<img style="position:absolute;width:100%;height:100%;" src="' + imUrl + '" />');
});

【讨论】：

如果我们无法获取 HTML，这肯定是要走的路，非常感谢您的建议！

【解决方案5】：

请阅读此article

 #img.source-image {
      width: 100%;
      position: absolute;    
      top: 0;
      left: 0;
}

【讨论】：

我偶然发现了它，但这并不是我真正想要的 - 它不需要调整大小，只需调整大小！