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

单行、唯一 0     382      前端   1     0
因为项目需要,有的封面图大有的小,造成变形或者不全,我们的前端又解决不了,所以就去百度研究了下,总结了下面的方法,拿去用个,不谢
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.调用方法看方法体注释


captcha
忘记密码? 注册
第三方登录
微信赞赏
支付宝赞赏