jQuery - 能否将背景图片调整为固定大小？

Question

我现在遇到一种紧急情况，需要将一个 div 的背景图像适配到特定的尺寸。有人知道是否可以使用 jQuery 实现吗？我已经知道它需要的尺寸，不必随着 div 的尺寸而调整大小。35,000 张图像被缩放到了错误的尺寸，且需要上线，因此无法重新调整图像大小！

如果您有任何建议，我将不胜感激！

编辑：我正在考虑是否能够通过更改 HTML，将背景图像从 DIV 中取出，并将其放置在一个绝对定位的分离的 div 中，同时使用 IMG 标签进行调整大小...然后可以用 CSS 对 IMG 标签进行调整。

- Cordial

---

你是用完整的图片还是使用CSS的'background'属性来绘制它？（例如：background-repeat） - Fran Verona

这是一张完整的图片，需要放置在 DIV 的中央。 - Cordial

你可以在 <image> HTML 标签中指定高度/宽度，以将其调整为绝对大小。你能否设置 Photoshop 动作并对这 35k 张图片运行批处理？可能需要一天的时间 :) - jpea

原始批次是在Photoshop动作中完成的，但分辨率为300dpi。我一直讨厌使用HTML明显调整大小的图像，并想知道人们在想什么...现在我发现自己也有责任。 - Cordial

我认为你最好的做法是再运行一批并正确调整图像大小。这将在长期内节省你的麻烦。 - josh3736

Answer 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实现背景尺寸调整的方法。

在这种情况下，也许这篇文章可以帮到您。

- Kyle

---

@Kyle，你使用“只有”这个词让读者产生了一个印象，认为该功能在少数浏览器中实现，而实际上它被几乎所有浏览器所实现，除了一个。 - Šime Vidas

...而且 background-size 有除了固定长度单位以外的选项。 - josh3736

@Šime Vidas：这份兼容性表很有帮助。 - josh3736

@josh 我使用的是这个：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets%29 - Šime Vidas

@Cordial：如果这个答案对你有帮助，为什么不接受它呢？你知道，在SO上表达感激之情的最常见方式是点赞和接受答案，虽然“谢谢”评论也很好。 - mingos

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可以这样更改background-size:

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

- Andreas

Answer 3

背景图像只能通过CSS 3草案中的功能进行缩放，但这些草案在浏览器中的支持还不够广泛。

JavaScript可以解析CSS，找到background-image，生成前景图像(<img>)，将其样式设为绝对定位在内容后面并进行缩放...但这是一项很繁琐的工作。

最简单和最可靠的解决方案是使用ImageMagick编写一个快速脚本(我可能会使用bash，但PHP或任何其他编程语言也是选项)，对服务器上的35000张图片进行程序化调整大小。(这也可能是最快的方法)。

- Quentin

Answer 4

请阅读此文章。

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

- Jonas T

---

我偶然发现了这个，但它并不是我想要的 - 它不需要像这样可调整大小，只需要调整大小即可！ - Cordial

Answer 5

如果将背景作为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 + '" />');
});

- Marnix

---

如果我们无法获取HTML，这绝对是一个好方法，非常感谢您的建议！ - Cordial