图片缩放自适应，以兼容不支持object-fit属性的浏览器

前言

用过可以解决此类问题的js插件，但是发现图片太多时，占用资源太大，卡顿严重，然后自己想了一个奇怪的解决方法...

获取原图片样式 --> 在图片外包裹容器 --> 把图片样式赋给容器，图片链接用作容器背景，background-size：cover --> 隐藏图片

代码

// 获取浏览器版本号
function getBrowser() {
    var UserAgent = navigator.userAgent.toLowerCase();
    var browserInfo = {};
    var browserArray = {
        IE: window.ActiveXObject || "ActiveXObject" in window,
        // IE
        Chrome: UserAgent.indexOf('chrome') > -1 && UserAgent.indexOf('safari') > -1,
        // Chrome浏览器
        Firefox: UserAgent.indexOf('firefox') > -1,
        // 火狐浏览器
        Opera: UserAgent.indexOf('opera') > -1,
        // Opera浏览器
        Safari: UserAgent.indexOf('safari') > -1 && UserAgent.indexOf('chrome') == -1,
        // safari浏览器
        Edge: UserAgent.indexOf('edge') > -1,
        // Edge浏览器
        QQBrowser: /qqbrowser/.test(UserAgent),
        // qq浏览器
        WeixinBrowser: /MicroMessenger/i.test(UserAgent) // 微信浏览器
    };
    // console.log(browserArray)
    for (var i in browserArray) {
        if (browserArray[i]) {
            var versions = '';
            if (i == 'IE') {
                versions = UserAgent.match(/(msie\s|trident.*rv:)([\w.]+)/)[2];
            } else if (i == 'Chrome') {
                for (var mt in navigator.mimeTypes) {
                    //检测是否是360浏览器(测试只有pc端的360才起作用)
                    if (navigator.mimeTypes[mt]['type'] == 'application/360softmgrplugin') {
                        i = '360';
                    }
                }
                versions = UserAgent.match(/chrome\/([\d.]+)/)[1];
            } else if (i == 'Firefox') {
                versions = UserAgent.match(/firefox\/([\d.]+)/)[1];
            } else if (i == 'Opera') {
                versions = UserAgent.match(/opera\/([\d.]+)/)[1];
            } else if (i == 'Safari') {
                versions = UserAgent.match(/version\/([\d.]+)/)[1];
            } else if (i == 'Edge') {
                versions = UserAgent.match(/edge\/([\d.]+)/)[1];
            } else if (i == 'QQBrowser') {
                versions = UserAgent.match(/qqbrowser\/([\d.]+)/)[1];
            }
            browserInfo.type = i;
            browserInfo.versions = parseInt(versions);
        }
    }
    return browserInfo;
}

// 图片缩放自适应，以兼容不支持object-fit属性的浏览器
function imgCover(selector) {
    if (selector != undefined || '') { //选择器不为空
        $(selector).each(function() { //遍历所有选择器
            // 获取原图片css样式
            var position = $(this).css('position'),
            top = $(this).css('top'),
            left = $(this).css('left'),
            right = $(this).css('right'),
            bottom = $(this).css('bottom'),
            index = $(this).css('z-index'),
            float = $(this).css('float'),
            width = $(this).css('width'),
            height = $(this).css('height'),
            url = this.src;
            // 定义内联样式
            var style = "position: " + position + "; top: " + top + "; left: " + left + "; right: " + right + "; bottom: " + bottom + "; z-index: " + index + "; float: " + float + "; width: " + width + "; height: " + height + "; background-image: url('" + url + "');";

            $(this).wrap('
'); //在原img标签外部包裹div，并设置样式以及背景图片
            $(this).css('opacity', '0'); //隐藏原图片
        })
    }
}

调用

$(function() {
    var browser = getBrowser(); //获取浏览器版本信息
    if (browser.type == 'Chrome' && browser.versions < 31) {
        // 图片缩放自适应，以兼容不支持object-fit属性的浏览器
        imgCover('.banner-bg, .introduction-item-img, .news-left-items-single, .globalVision-left-items-single-img');
    } else if (browser.type == 'IE' && browser.versions < 16) {
        // 图片缩放自适应，以兼容不支持object-fit属性的浏览器
        imgCover('.banner-bg, .introduction-item-img, .news-left-items-single, .globalVision-left-items-single-img');
    } else if (browser.type == 'Firefox' && browser.versions < 36) {
        // 图片缩放自适应，以兼容不支持object-fit属性的浏览器
        imgCover('.banner-bg, .introduction-item-img, .news-left-items-single, .globalVision-left-items-single-img');
    } else if (browser.type == 'Safari' && browser.versions < 8) {
        // 图片缩放自适应，以兼容不支持object-fit属性的浏览器
        imgCover('.banner-bg, .introduction-item-img, .news-left-items-single, .globalVision-left-items-single-img');
    } else if (browser.type == 'Opera' && browser.versions < 19) {
        // 图片缩放自适应，以兼容不支持object-fit属性的浏览器
        imgCover('.banner-bg, .introduction-item-img, .news-left-items-single, .globalVision-left-items-single-img');
    }
});

好像还可以再封装一下，懒得改了...

未在所有浏览器测试过，生产环境慎用