jquery 如何让图片自适应大小

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

jQuery.fn.LoadImage=function(scaling,width,height,loadpic){

if(loadpic==null)loadpic="../img/loading.gif"

return this.each(function(){

var t=$(this)

var src=$(this).attr("src")

var img=new Image()

img.src=src

//自动缩放图片

var autoScaling=function(){

if(scaling){

if(img.width>0 &&img.height>0){

if(img.width/img.height>=width/height){

if(img.width>width){

t.width(width)

t.height((img.height*width)/img.width)

}else{

t.width(img.width)

t.height(img.height)

}

}

else{

if(img.height>height){

t.height(height)

t.width((img.width*height)/img.height)

}else{

t.width(img.width)

t.height(img.height)

}

}

}

}

}

//处理ff下会自动读取缓存图片

if(img.complete){

autoScaling()

return

}

$(this).attr("src","")

var loading=$("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""+loadpic+"\" />")

t.hide()

t.after(loading)

$(img).load(function(){

autoScaling()

loading.remove()

t.attr("src",this.src)

t.show()

})

} )

}

</script>

<div id="content"><img src="img/20120518073933709.jpg"/></div>

<script type="text/javascript">

<!--

$(window).load(function(){

$('#content img').LoadImage(true, 600,500,'img/loading.gif')

})

//-->

</script>

1、界面中有一个img，但是没有用js来设置它的宽度高度和背景颜色。

2、接着使用jQuery获取到所要设置的div，并且调用css（）方法即可开始设置了。

3、在css方法即可设置，注意，里面有花括号哦，并且属性用双引号引起来。

4、同时设定多个属性，则要用逗号隔开，这样即可多个属性生效。

5、接着打开hbuilder上方浏览器小图标，开始预览。

6、最后观看效果。

---