jQuery.imgAutoSize：图片自适应大小（以宽度）+…

jQuery.imgAutoSize：图片自适应大小（以宽度）+…

李勇为您共享jQuery.imgAutoSize软件，处理图片自适应尺寸（以宽度）的难题，附图片垂直居中的方式。这儿无需css解决图片自适应尺寸，那方法不太合乎w3c规范，很感兴趣的同学们自主百度搜索。李勇为你分享jQuery.imgAutoSize软件，处理图片大小(按宽度)自适应问题，以图片垂直居中的方式。这里不需要css来解决图像大小自适应的问题。那个方法不太符合w3c规范，有兴趣的同学百度一下自主搜索。

jQuery.imgAutoSize：图片自适应尺寸（以宽度）图片垂直居中
jQuery.imgAutoSize:图片的自适应大小(宽度)图片垂直居中。

jQuery.imgAutoSize：图片按宽度自适应尺寸 // jQuery.imgAutoSize.js//jQuery.imgAutoSize.js (函数($){

varloadImg=function(url，fn){

        var img = new Image();varimg=newImage()；

        img.src = url;img.src=url

        if (img.complete) {if(img.complete){

            fn.call(img);fn.call(img)；

}否则{

            img.onload = function () {img.onload=function(){

                fn.call(img);fn.call(img)；

                img.onload = null;img.onload=null

};

};

};

    $.fn.imgAutoSize = function (padding) {＄.fn.imgautosize=function(padding){

varmaxWidth=this.innerwidth()-(padding||0)；

        return this.find('img').each(function (i, img) {返回this.find('img')。每个(函数(I，img){

loadImg(this.src，function(){

如果(this.width>maxWidth){

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

width=maxWidth

                    img.width = width;img.width=宽度；

                    img.height = height;img.height=height

};

});

});

};

})(jQuery)；

*** 作方法:

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

常见问题:

1、假如要 *** 纵图片与器皿的行高，如30清晰度：$('.imgWrap').imgAutoSize(30); 2、.imgWrap这个是图片外界器皿，应用了本软件后超大型的图片宽度可能限定在器皿宽度。 强迫思维！图片也垂直居中（文本也可用）

总的来说，按照上面的方法，我可以很好的达到预期的目标。我是个强迫性的人，所以不行。我不能垂直居中。。。

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

常见问题:

1、html中img标签不必设定width和height； 2、css中line-height必须界定宽度和高宽比，别忘记设定行高； 3、img要放到div小盒子里，不然失效； 4、文本垂直居中.midWrap中必须添加这条特性vertical-align:middle。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/764523.html