Is there any way to force the object-fit: cover; property object-fit: cover; work with IE and Edge? I know that there is a thing called Polyfill, I don’t know what to do with it. Help please solve the problem with object-fit: cover; for IE and Edge.

1 answer 1

I propose to do the following hack: set the image as a background to the block and apply the background-size: cover property to it, which also works in IE and Edge. This option will be on pure CSS and will work much faster than polyfiles on JS.

However, if you really need to use img , you can use a polyfill for IE:

 var Detect = { init: function () { this.browser = this.searchString(this.dataBrowser); }, searchString: function (data) { for (var i=0;i<data.length;i++) { var dataString = data[i].string; var dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) != -1) return data[i].identity; } else if (dataProp) return data[i].identity; } }, dataBrowser: [ { string: navigator.userAgent, subString: "MSIE", identity: "IE", versionSearch: "MSIE" } ] }; Detect.init(); if(Detect.browser == 'IE'){ var bgImg = document.querySelector("#bg img"); imgUrl = bgImg.getAttribute('src'); bg.innerHTML += '<div class="img" style="background-image: url(' + imgUrl + ')">'; } 
 #bg{ height: 100vh; width: 100%; position: relative; } #bg img{ object-fit: cover; height: 100%; width: 100%; } #bg .img{ background: #fff no-repeat 50% / cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 
 <html> <body> <div id="bg"> <img src="https://1000.tech/img/bg0.jpg"> </div> </body> </html>

  • As far as I know, in this case, the pictures are not indexed, so I’m not sure that it will be better than the polyfill. But I’ll do the fastest way, thanks - Andrei Kazmirovich