解决object-fit兼容IE浏览器实现图片自适应

1.npm install --save object-fit-images 安装object-fit-images包
2.import objectFitImages from ‘object-fit-images’在你上传图片的组件里,import进来
3.图片的CSS设置

img{
object-fit:cover;
font-family: “object-fit: cover;”;
}

4.在需要处理这个图片地方,执行这个objectFitImages处理图片方法即可。例如我的是React项目,因此一般都是在useEffect之中执行,如果这个图片还会改变的话,就是需要监听它的变化,在它变化后再执行一次这个处理方法。

<img className="avator" alt=""  src={`http://dlutir.dlut.edu.cn/ImageShow?Id=${user.pic}`}/>
useEffect(() => {
    var someImages = document.querySelectorAll('avator');
    objectFitImages(someImages);
}, []);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容