问卷调查网站设计

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

jQuery.imgAutoSize：图片自适应大小（以宽度）+图片垂直居中

jQuery.imgAutoSize：图片按宽度自适应大小

1. //jQuery.imgAutoSize.js

2. (function($){

   varloadImg=function(url,fn){

3. varimg=newImage();

   img.src=url;

4. if(img.complete){

   fn.call(img);

5. }else{

   img.onload=function(){

6. 网站建设公司fn.call(img);

   img.onload=null;

7. };

   };

8. };

9. $.fn.imgAutoSize=function(padding){

   varmaxWidth=this.innerWidth()-(padding||0);

10. returnthis.find('img').each(function(i,img){

    loadImg(this.src,function(){

11. if(this.widthmaxWidth){

    varheight=maxWidth/this.width*this.height,

12. width=maxWidth;

13. img.width=width;

    img.height=height;

14. };

    });

15. });

    };

16. })(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。