美文网首页
解决object-fit兼容IE浏览器实现图片自适应

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

作者: mwj610 | 来源:发表于2021-03-05 09:18 被阅读0次

    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);
    }, []);
    

    相关文章

      网友评论

          本文标题:解决object-fit兼容IE浏览器实现图片自适应

          本文链接:https://www.haomeiwen.com/subject/iwfrqltx.html