Here is a way to make object fit for images behave similarly in Internet Explorer and Edge.
The basic idea is that we have an img that we want to scale into different sizes but also proportions (e.g get wider or higher than the original image).
We allow some clipping occur to enable this. This is especially useful in responsive website where you need to support different viewports and perhaps number of columns for a list of images etc.
More info here and examples of clipping of image etc:
https://www.w3schools.com/css/css3_object-fit.asp
We use this css styling to enable that on the img element:
Unfortunately object-fit is supported by all major browsers except Internet Explorer and Edge. A way to make it work in those browsers is to copy the image src to the image container element and use the background* css propeties instead.
The code and idea is taken from here:
https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3
I have tweaked the above example a bit and here is my version of it. See comments section in the link above for plain js versions etc.
Usage
We mark the img with the class “img-cover”:
|
|
<div class="img-container"> <img class="img-cover" src="http://via.placeholder.com/800x380" /> </div> |
Source files
Download here: img-cover-source.zip
The js has dependencies on jquery 3.2.1 and modernizr 3.6 (I have tested with those versions).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$(document).ready(function () { //Object fit fallback for Internet Explorer and Edge browser. 2018-11-22 //Makes an image inside img element fill its container either vertically or horizontally. (like a background css cover) //Allows clipping of image but keeps the aspect ratio. //Uses jQuery and Modernizr 3.6 to check if polyfill is needed. //Idea and code from https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3 //Replaces img with background image on container and sets the img opacity to 0 (making it invisible and shows the bg image instead). //Select image with image cover behaviour: var imageSelector = "img.img-cover"; var $images = $(imageSelector); //if any image cover type of elements were found if ($images.length > 0) { //if browser do not support object fit - apply polyfill if (!Modernizr.objectfit) { $($images).each(function () { //copy img src var $container = $(this).parent(); var imgUrl = $container.find('img').prop('src'); if (imgUrl) { //set img as background image of container instead $container .css('backgroundImage', 'url(' + imgUrl + ')') .addClass('compat-object-fit'); } }); } } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.img-cover { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; } .compat-object-fit { background-size: cover; background-position: center center; } .compat-object-fit .img-cover { opacity: 0; } |
The html should look like this when the polyfill is working in Internet Explorer or Edge:
|
|
<a class="compat-object-fit" style='background-image: url("example.jpg");' href="/article1"> <img class="img-cover" src="example.jpg"> </a> |
The container (a-element) gets the compat-object-fit class and inline style background image is copied from its contained img src. Also the css file will set the contained img to opacity 0 in favor of container bg image instead.
