兼容ie图片不拉伸

图片显示拉伸（ie兼容性）

长>宽 或者 宽>长时，图片盒子为正方形时 图片默认拉伸变形。

1. 网站中出现图片的使用：

1.1 el-image组件

1.2 el-upload上传图片组件

1.3 img普通元素

2. 正常图片不变形处理：

2.1 给图片加上object-fit属性

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

2.2 给元素的父元素设置backgroung-image

（1）给当前元素设置display: none;

（2）给父元素动态样式绑定:style，设置背景图

（3）使用背景样式background-position:center; background-repeat: no-repeat; background-size:cover|contain;

2.1与2.2区别：

2.1方法简单快捷，但存在兼容性问题（不兼容ie）

2.2相对繁琐，但适用于ie浏览器

3. 解决ie兼容性问题：

通过引入的一个插件包object-fit-images ，使ie能够兼容2.1方法

使用方法：

3.1 安装插件包

cnpm install --save object-fit-images

3.2 img元素自带src属性

图片的CSS设置

.el-upload-list__item-thumbnail {
        object-fit: contain;   //"fill"、"cover" 
        font-family: 'object-fit: contain;';
}

3.3 使用 objectFitImages 方法

import objectFitImages from "object-fit-images"; // 引入 objectFitImages 方法
// 可以处理多张图片
const images = document.querySelectorAll(".el-upload-list__item-thumbnail");
objectFitImages(images);
// 也可以处理单张图片
const image = document.querySelector(".el-upload-list__item-thumbnail");
objectFitImages(image);

推荐：

1. 多次图片处理，使用到组件的图片，且需要兼容ie，引入object-fit-images插件包使用；
2. 少量简单图片元素，兼容ie处理，可考虑背景图处理；