网页上图片封面自适应图片容器不变形图片自适应

单行、唯一 0 4173 前端 1 0 2018-09-24 16:20

因为项目需要，有的封面图大有的小，造成变形或者不全，我们的前端又解决不了，所以就去百度研究了下，总结了下面的方法，拿去用个，不谢

function  imgAutoSize(options){
      //默认参数
      var defaults = {
        selector: '' //图片选择器
        ,width: '500' //图片容器宽度像素
        ,height: '400'//图片容器高度像素
      }
      //参数合并
      var config = $.extend({},defaults, options);

      var img = $(config.selector);
      img.each(function(index, el) {
          var b = config.width/config.height;
          var image = new Image();
          //原图片原始地址（用于获取原图片的真实宽高，当标签指定了宽、高时不受影响）
          image.src = el.src;  
          // 当图片比图片框小时不做任何改变 
          if (image.width/image.height < b) {
              $(el).width('100%');
          }
          else
          {
              $(el).height('100%');
          }
      });
      return false;
};

1.每一张图片都有一个固定宽高的容器

2.图片加上一个选选择器

3.图片会根据自身的宽高计算，是宽度100%还是高度100%；超出部分隐藏

4.调用方法看方法体注释