当前位置: 首页 > Web前端 > HTML

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

时间:2023-04-02 17:14:41 HTML

图片缩放适配不支持object-fit属性的浏览器奇怪的解决办法...获取原始图片样式-->将容器包裹在图片外-->将图片样式赋值给容器,使用图片链接作为容器背景,background-size:cover-->hidetheimage代码//获取浏览器版本号functiongetBrowser(){varUserAgent=navigator.userAgent.toLowerCase();var浏览器信息={};varbrowserArray={IE:window.ActiveXObject||窗口中的"ActiveXObject",//IEChrome:UserAgent.indexOf('chrome')>-1&&UserAgent.indexOf('safari')>-1,//ChromeFirefox:UserAgent.indexOf('firefox')>-1,//FirefoxOpera: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(variinbrowserArray){if(browserArray[i]){varversions='';if(i=='IE'){versions=UserAgent.match(/(msie\s|trident.*rv:)([\w.]+)/)[2];}elseif(i=='Chrome'){for(varmtinnavigator.mimeTypes){//检查是否是浏览器(测试只在PC端的360有效)if(navigator.mimeTypes[mt]['type']=='application/360softmgrplugin'){i='360';}}versions=UserAgent.match(/chrome\/([\d.]+)/)[1];}elseif(i=='Firefox'){versions=UserAgent.match(/firefox\/([\d.]+)/)[1];}elseif(i=='Opera'){versions=UserAgent.match(/opera\/([\d.]+)/)[1];}elseif(i=='Safari'){versions=UserAgent.match(/version\/([\d.]+)/)[1];}elseif(i=='Edge'){versions=UserAgent.match(/edge\/([\d.]+)/)[1];}elseif(i=='QQBrowser'){versions=UserAgent.match(/qqbrowser\/([\d.]+)/)[1];}browserInfo.type=i;browserInfo.versions=parseInt(versions);}}returnbrowserInfo;}//图片缩放自适应兼容不支持object-fit属性函数的浏览器imgCover(selector){if(selector!=undefined||''){//selector不为空$(selector).each(function(){//遍历所有选择器//得到原图css样式varposition=$(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('浮动'),width=$(this).css('width'),height=$(this).css('height'),url=this.src;//定义内联样式varstyle="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('

');//将div包裹在原img标签外,并设置样式和背景图片$(this).css('opacity','0');//隐藏原图})}}调用$(function(){varbrowser=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');}elseif(browser.type=='IE'&&browser.versions<16){//图片缩放自适应,不支持兼容性Object-fit属性browserimgCover('.banner-bg,.introduction-item-img,.news-left-items-single,.globalVision-left-items-single-img');}elseif(browser.type=='Firefox'&&browser.versions<36){//图像缩放自适应以与不支持object-fit属性的浏览器兼容imgCover('.banner-bg,.introduction-item-img,.news-left-items-single,.globalVision-left-items-single-img');}elseif(browser.type=='Safari'&&browser.versions<8){//图片缩放自适应,不支持兼容性Object-fit属性browserimgCover('.banner-bg,.introduction-item-img,.news-left-items-single,.globalVision-left-items-single-img');}elseif(browser.type=='Opera'&&a议员;browser.versions<19){//图片缩放自适应,兼容不支持object-fit属性的浏览器imgCover('.banner-bg,.introduction-item-img,.news-left-items-single,.globalVision-left-items-single-img');}});好像可以重新打包,懒得改了。。。没有在所有浏览器测试,生产环境慎用