正文
jquery图片自适应,图片自适应div
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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.width0 img.height0){
if(img.width/img.height=width/height){
if(img.widthwidth){
t.width(width);
t.height((img.height*width)/img.width);
}else{
t.width(img.width);
t.height(img.height);
}
}
else{
if(img.heightheight){
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
相关问答
Q1: jquery mobile 图片如何自动适应大小？
这位网友你好，你可以设置图片的宽度为100%就可以自适应大小了~
Q2: CSS/Jquery图片自适应的几种方式
1，用HTML5技术
2，还是传统的HTML，但是可以做CSS，让图片宽度在电脑端和手机端自适应
