固定宽高，动态图片自适应容器问题

需求：v-for循环生成列表，动态传入图片链接；图片外部容器尺寸固定，要求图片填满容器，并且不变形

大概dom长这样，很简单的一个循环

问题：传入的图片尺寸不固定，要保证图片不变形，需要通过自适应的方式，width为100%，或者高度为100%。但是图片尺寸动态变化，无法统一写成宽填满，或者统一写成高填满。

最好的办法是能够获取传入图片的宽高，通过宽高比决定使用哪种样式。

后台传入的数据是一个url，那么就需要把url转为一个图片对象，以获取它的宽高。

在网上找到了下面的方法，具体请戳这里

//加日期防止缓存
var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 加载完成执行
img.onload = function(){
  // 打印
  alert('width:'+img.width+',height:'+img.height);
};

初步想法是直接绑定样式

 imgStyle(src) {
var img_url = src + Date.parse(new Date());
let  img = new Image();
img.src = src;
// 加载完成执行，如果不适用onload，打印出img的宽高会都为0。
img.onload = function(){
  if (img.width > img.height) {
          return {height : '100%'};
        } else {
          return {width : '100%'};
        }
}

但是没有生效，load是一个异步线程，打断点调试发现在onload异步执行完之前，图片已经全部显示在了页面上，再返回样式就无法对应是哪个图片。

同样，使用class，用这种方法绑定也不生效。

只能换一种思路了。

$event

$event是vue中用于访问原生dom对象的参数

$event

上面的写法，正常传参是可以的，但是onload这种属性写法无法识别$event这个参数，所以在这里可以使用load方法

imgStyle(e) {
let img = e.target;
      console.log(e.target.offsetHeight, e.target.offsetWidth);
        if (img.offsetWidth > img.offsetHeight) {
          img.style.height = '100%';
          img.style.width = '';
        } else {
          img.style.height = '';
          img.style.width = '100%';
        }
}

当然有得必有失，要想图片填满容器，又保证不能变形，肯定会失去一部分图片内容，这里处理成图片居中显示，确保图片内容最大程度展示在容器中。(我们产品可以点击图片查看大图，展示图片所有内容)

（完整效果图待上传）

image.png