jQuery - 可以将背景图像调整为设定大小吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4713935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - possible to resize background-image to a set size?
提问by Cordial
I'm in a situation where I urgently need to fit a background image of a div to a certain size. Does anyone know if this is possible with jQuery? I know the size it needs to be, it doesn't have to resize with the size of the div. 35,000 images have been scaled to the wrong size and it needs to go live so resizing the images isn't an option!
我正处于一种迫切需要将 div 的背景图像调整为特定大小的情况。有谁知道这是否可以用 jQuery 实现？我知道它需要的大小，它不必随着 div 的大小调整大小。35,000 张图片被缩放到错误的尺寸，需要上线，因此无法调整图片大小！
Any advice appreciated!
任何建议表示赞赏！
EDIT: I'm just seeing whether we're able to alter the HTML to take the background image out of the DIV and put it in a separate absolutely positioned div at the same with an IMG tag in it... the IMG tag can then be resized with CSS.
编辑：我只是想看看我们是否能够改变 HTML 以从 DIV 中取出背景图像并将其放在一个单独的绝对定位的 div 中，其中有一个 IMG 标签...... IMG 标签可以然后用 CSS 调整大小。
回答by Kyle
You can use CSS3 to change the background size. The browsers that have this feature implemented are Opera, Safari, Chrome, Firefox, Konqueror and IE9:
您可以使用 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;
}
Not sure about the jQuery implementation of background size.
不确定背景大小的 jQuery 实现。
In this case, maybe this articlewill help you.
在这种情况下，也许本文会对您有所帮助。
回答by Andreas
With css:
使用 CSS：
#myDiv {
background: transparent url(../../Images/2.jpg);
background-size: 400% 400%;
}
Note that "400% 400%" gives the width and height. Can also use "px" or "em", a combination, auto etc etc. See the CSS3 spec for more of those details: http://www.w3.org/TR/css3-background/#the-background-size
请注意，“400% 400%”给出了宽度和高度。也可以使用“px”或“em”、组合、自动等。有关更多详细信息，请参阅 CSS3 规范：http: //www.w3.org/TR/css3-background/#the-background-size
With jquery you can change the background-size like so:
使用 jquery，您可以像这样更改背景大小：
$('#myDiv').css({
'background-size': '200% 200%'
});
回答by Quentin
Background images can only be scaled with features in the CSS 3 drafts, which do not yet have wide support in browsers.
背景图像只能使用 CSS 3 草稿中的功能进行缩放，这些功能尚未在浏览器中得到广泛支持。
JavaScript could parse the CSS, find the background-image, generate a foreground image (<img>for it), style it to be absolutely positioned behind the content and scale it … but that is a lot of work.
JavaScript 可以解析 CSS，找到背景图像，生成前景图像（<img>为它），将其设置为绝对位于内容后面并对其进行缩放……但这需要大量工作。
The easiestand most reliablesolution would be to knock up a quick script using ImageMagick (I'd probably use bash for this, but PHP or any other programming language are options) to programatically resize all 35,000 images on the server. (This might also be to be the fastest approach too).
在最简单和最可靠的解决方案是敲了使用ImageMagick一个快速脚本（我可能会使用bash这一点，但PHP或任何其他的编程语言是期权）以编程方式在服务器上调整所有35000个图像。（这也可能是最快的方法）。
回答by Jonas T
回答by Marnix
If the background is used as a background-image, you can't set them to 100%. This can be found a 1000 times on SO here I think. So that would go into some nightly batch to resize them all.
如果背景用作background-image，则不能将它们设置为 100%。我认为这可以在 SO 上找到 1000 次。所以这将进入一些夜间批次以调整它们的大小。
You could also create some code to put an <img>tag inside the div. The image can then be scaled to 100%. To do this, you have to ask things to your CSS, or div like so:
您还可以创建一些代码来<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 + '" />');
});
