用于DIV上可缩放背景图像的jQuery插件

我尝试过研究，但没有找到一个好的jQuery插件，它可以让我在可伸缩的情况下将背景图像插入到div中。比如说,

假设我有4个不同的div，如下所示：

<div id="one">

</div>

<div id="two">

</div>

<div id="three">

</div>

<div id="four">

</div>

每个/id/div必须有自己独特的图像，并且必须根据浏览器的宽度和高度调整大小或可缩放。我希望它与IE7+兼容。若堆栈溢出社区能够提供帮助，那个就太棒了

---

我知道我可以在div上使用background resize:100%，但只能在现代浏览器上使用。

这是我为您准备的东西。在创建或添加两个额外的宽度和高度参数之前设置div的大小

(function( $ ) {
  $.fn.bgImage = function( src ) {
    var d=this;
    var ht=d.html();
    var z=parseInt(d.css('z-index'));
    if(!z) z=0;  
    var oImg=document.createElement('img'); 
    oImg.src=src;
    oImg.style.width=d.width()+'px';
    oImg.style.height=d.height()+'px';
    oImg.style.position='absolute';
    oImg.style.zIndex=z;
    d.html('');
    d.append('<div id="a" style="position:absolute;z-index:'+(z+1)+';">'+ht+'</div>');
    d.append(oImg);
  };
})( jQuery );

$('#one').bgImage('http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif');