html页面内图片自动切换,HTML页面图片自动适应宽度

RT.

这个是之前做微信微站的时候一直在心头的一根刺，在后台文章编辑的时候如果用户不先设定好文章中图片的宽度，那么那么在微信手机端查看文章时，超出了屏幕宽度的图片就会被隐藏。导致用户体验一致不好。

最近自己在学习后台技术时，继续使用了kindeditor和umeditor和ckeditor等等所见即所得的的文本编辑器。重新遇到这个问题。于是下定决心，找个彻底的解决方法，使超出页面宽度的图片自动调整宽度以适应页面。

主要方法有：

1：CSS img标签设置照片的最大宽度和最大高度；

2：通过js对超出页面宽度的图片宽度进行调整：

这个方法需要借助一个作者写的库：

// jQuery.imgAutoSize.js

// Tang Bin - http://planeArt.cn/ - MIT Licensed

(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);

将这个库保存成一个文件并引入页面后，通过下面的方式调用：

jQuery(function ($) {

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

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

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

});

其中，我们要对imgWrap对应的容器设置一个宽度，在imgWrap页面中的图片就能够自适应容器宽度。

3：在提交的时候在后端处理

这种方法不太推荐，原因是当图片存储的时候，文章中的图片的宽度进行了限制，这种处理方式只能够适应某一些特定的显示场景，对于某些特别小或者特别大的显示情况，仍然等价于没有调整。