肯定的是这个不是唯一的方法。只是本人在实际项目中的一个解决方法。
众所周知,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) {
            if ($(".hasbg").length) {
                $(".hasbg").each(function () {
                    $(this).css({
                        "background-image": function () {
                            var b = $(this).children("img").attr("src");
                            $(this).children("img").remove();
                            return "url(" + b + ")";
                        }
                    });
                });
            }
        }
    }

可以看出,首先判断了有没有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;
}
本篇文章相关标签: