HTML页面图片自动适应宽度

RT.

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

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

主要方法有：

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

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

转载自：http://www.oschina.net/code/snippet_54100_2756 亲测可行。

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

// 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：在提交的时候在后端处理

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

HTML页面图片自动适应宽度

猜你喜欢