互联网思维倡导者
改变烟台SEO优化,网站运营,网络营销现状

jQuery.imgAutoSize:图片自适应大小(以宽度)+图片(文字)垂直居中

李勇为您分享jQuery.imgAutoSize插件,解决图片自适应大小(以宽度)的问题,附图片垂直居中的方法。这里不用css处理图片自适应大小,那法子不太符合w3c标准,感兴趣的同学自行百度。


jQuery.imgAutoSize:图片自适应大小(以宽度)+图片垂直居中

jQuery.imgAutoSize:图片按宽度自适应大小//jQuery.imgAutoSize.js(function($){varloadImg=function(url,fn){varimg=newImage();img.src=url;if(img.complete){fn.call(img);}else{img.onload=function(){fn.call(img);img.onload=null;};};};$.fn.imgAutoSize=function(padding){varmaxWidth=this.innerWidth()-(padding||0);returnthis.find(‘img’).each(function(i,img){loadImg(this.src,function(){if(this.width>maxWidth){varheight=maxWidth/this.width*this.height,width=maxWidth;img.width=width;img.height=height;};});});};})(jQuery);

使用方法:

$('.imgWrap').imgAutoSize();

注意事项:

1、如果要控制图片与容器的边距,如30像素: $('.imgWrap').imgAutoSize(30);2、 .imgWrap这个是图片外部容器,使用了本插件后超大的图片宽度将会限制在容器宽度。

强迫症!图片也垂直居中(文字也适用)

一般来说,按照上面的方法就能很好的达到预期效果了,我是个有强迫症的人,没办法,垂直方向也居中吧。。。  

*{margin:0 auto}.midWrap{display:table-cell;vertical-align:middle;width:200px;height:200px;line-height:200px/*文字/图片垂直居中*/}.imgWrap{display:block;max-width:100%}

注意事项:

1、html中img标签不要设置width和height;2、css中line-height需要定义宽度和高度,不要忘记设置行高;3、img要放在div盒子里,否则无效;4、文字垂直居中.midWrap中需要加入这条属性vertical-align:middle。
赞(0) 打赏
未经允许不得转载:泥鳅SEO(张弘宇)博客,烟台SEO,互联网思维学习倡导者 » jQuery.imgAutoSize:图片自适应大小(以宽度)+图片(文字)垂直居中
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

五网合一企业网站建设

联系我们在线客服

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏