php自适应屏幕宽度,jQuery 页面图片img自适应屏幕宽度插件 imgAutoSize.js

接触过响应式布局的应该都知道，响应式布局中的图片会随着浏览器大小而变动，而这个其实大多利用的是百分比的形式，根据外在容器的大小设置。而对于今天要说的这个插件，它的更多作用是在于文章内容的图片自适应，随着现在可视化编辑器的普吉，我们很多时候会把文章的图片编辑的适合浏览的情况，那么比如现在常见的800像素一类的，而对于手机浏览用户而言，这个就糟糕了，毕竟不可能那么小的图片在上面。这个时候，超出就会有了滚动条的出现。

对于这种情况，因为编辑器本身只能设置百分比或者具体的像素大小，就无法应对图片太大，变形的情况。那么就需要额外的JS来做补助，就是imgAutoSize.js，这个是我找的一个JQ的版本，JQ流行到现在基本所有网站都有用，所以JQ也无所谓了。

原理呢其实蛮简单的，就是利用JS去加载图片，然后获取图片的实际宽高，之后计算宽度缩放比例同时缩放高度后的值，重新给IMG设置样式。

(function ($) {

var loadImg = function (url, fn) {

var img = new Image();

img.src = url;

if (img.complete) {

fn.call(img);

} else {

img.onload = function () {

fn.call(img);

img.onload = null;

};

};

};

$.fn.imgAutoSize = function (padding) {

var maxWidth = this.innerWidth() - (padding || 0);

return this.find('img').each(function (i, img) {

loadImg(this.src, function () {

if (this.width > maxWidth) {

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

width = maxWidth;

img.width = width;

img.height = height;

};

});

});

};

})(jQuery);

这个就是插件内容，放到imgAutoSize.js中引入即可。调用也非常简单。

jQuery(function ($) {

// .imgWrap这个是图片外部容器，使用了本插件后超大的图片宽度将会限制在容器宽度

// 如果要控制图片与容器的边距，如20像素： $('.imgWrap').imgAutoSize(20);

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

});

怎样，对于需要兼容屏幕的文章，或者给某些手机浏览器使用的情况下，不妨试试这个代码。