肯定的是这个不是唯一的方法。只是本人在实际项目中的一个解决方法。
众所周知,object-fit是个非常好的CSS3属性,可以将各种元素相对父级进行contain/cover操作。
尤其做响应式网站的时候非常好用。但问题是IE不支持。
那么针对IE,下面有个方法:
原理:判断如果是IE,将图片赋给父级元素作为背景,然后将图片移除。以达到在IE上使用background-size时有跟object-fit同样的效果。
用法:
DOM结构大概是:
<div class="hasbg"> <img src=""> </div>
js部分代码:
function ieFix() { if (!!window.ActiveXObject || 'ActiveXObject' in window) { $('html').addClass('is-ie'); if ($('.hasbg').length) { $('.hasbg').each(function () { var $this = $(this); var $src = $this.find('img').attr('src'); if ($src.length) { $this.css({ 'background-image': function () { $this.find('img').remove(); return 'url(' + $src + ')'; } }); } }); } } }
可以看出,首先判断了有没有hasbg这样的一个class。
如果有,进一步执行代码。
如果是IE浏览器,它将会把img的图片赋给hasbg作为背景。而后将img移除。
到此,图片转移成背景的操作就完成了。
还差一点操作,就是对背景图片的位置进行适当操作。
样式可以是:
.hasbg { background-position: center center; background-attachment: scroll; background-size: contain; -webkit-background-size: contain; background-repeat: no-repeat; }
评论区
发表新的留言
您可以留言提出您的疑问或建议。
您的留言得到回复时,会通过您填写的邮箱提醒您。