jQuery – 可以将背景图像调整为设定大小吗？

我正处于这样一种情况，我迫切需要将div的背景图像调整到一定的大小。 有谁知道这是否可以使用jQuery？ 我知道它需要的大小，它不必调整div的大小。 35,000张图片已缩放到错误的尺寸，需要上线，因此调整图像大小不是一个选项！

任何建议赞赏！

编辑：我只是看看我们是否能够改变HTML以从DIV中取出背景图像并将其放在一个单独的绝对定位的div中，同时带有IMG标签… IMG标签可以然后用CSSresize。

Answer 1

您可以使用CSS3更改背景大小。 具有此function的浏览器包括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实现。

在这种情况下，也许这篇文章会对你有所帮助。

Answer 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%' }); 

Answer 3

背景图像只能使用CSS 3草稿中的function进行缩放，这些function在浏览器中尚未得到广泛支持。

JavaScript可以解析CSS，找到背景图像，生成前景图像（ ），将其设置为绝对定位在内容后面并对其进行缩放……但这是很多工作。

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

Answer 4

如果背景用作background-image ，则无法将其设置为100％。 我认为这可以在SO上找到1000次。 因此，这将进入一些夜间批量resize。

您还可以创建一些代码，将标记放在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(''); }); 

Answer 5

请阅读这篇文章

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