<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
.site-header {
position: relative;
width: 1440px;
height: 650px;
margin: auto;
overflow: hidden;
}
.site-header img {
object-fit: cover;
max-width: 100%;
height: 650px;
}
/* CSS Fallback from Modernizr */
.site-header.compat-object-fit {
background-size: cover;
background-position: center;
}
.site-header.compat-object-fit img {
opacity: 0;
}
</style>
</head>
<body>
<header class="site-header">
<img src="https://placem.at/things?w=1440&h=768&txt=0&random=2" alt="Neat trick for CSS object-fit fallback on IE">
</header>
<!-- JavaScript/jQuery -->
<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/modernizr/2.8.3/modernizr.min.js"></script>
<script>
// Execute this if IE is detected.
function msieversion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
if ( ! Modernizr.objectfit ) {
$('.site-header').each(function () {
var $container = $(this),
imgUrl = $container.find('img').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('compat-object-fit');
}
});
}
}
return false;
} // End
$(document).ready(msieversion);
</script>
</body>
</html>
We didn’t want to generate multiple image sizes of all these images, so we decided to go with the object-fit.
Object-fit CSS property has a decent support in modern browsers, except in all IEs and even Edge. My first thought was to use a polyfill developed by Anselm Hannemann, but it turned out it is not working as expected in Edge (and it is not actively maintained anymore).
Update Note: I added the browser detection option if you wanted to execute this only in Internet Explorer browser.
credit to: Primož Cigler
original source url: https://goo.gl/uiPUCD
Object-fit CSS property has a decent support in modern browsers, except in all IEs and even Edge. My first thought was to use a polyfill developed by Anselm Hannemann, but it turned out it is not working as expected in Edge (and it is not actively maintained anymore).
Update Note: I added the browser detection option if you wanted to execute this only in Internet Explorer browser.
credit to: Primož Cigler
original source url: https://goo.gl/uiPUCD
12 Responses
Great hack, thanks alot. Works perfect in IE.
Question:
Is there a way to extend the script to work in MS Edge?
I'm not very keen in scripting, so I would appreciate some hints on how to get it to work or an updated version.
Thanks for your great work
Great hack. Works perfect in IE. Thanks alot.
Question:
Is there a way to extend the script to work in MS Edge too?
I'm not very keen in scripting, so I would appreciate a hint.
Regards Bruno
Great workaround. Works perfect in IE. Thanks alot.
Question:
Is there a way to extend the script to work in Edge and other non-object-fit-compatible browsers?
I'm not very keen in scripting, so a hint would be greatly appreciated.
Regards Bruno
I'm still on coding for the version 2 of this snippet. However, you can use this simple script to extend it to IE Edge.
https://codepen.io/gapcode/pen/vEJNZN
version 2 will have better css and script approach for IE browsers.
Regarding non-object-fit compatible browsers, I found out that IE is the only browser that don't support this CSS3 attribute.
Check here: http://caniuse.com/#search=object-fit
After some further research I've found the proposed solution but was not able to combine it with your Modernizr.objectfit script. Since my scripting skills are very poor, trial and error is my learning strategy.
Yeah IE once again – and what a shame not even Edge can be considered as a modern browser in this matter.
Regarding your version 2: wouldn't it be simpler to detect directly the object-fit ability instead of the different browser versions? Just a thought … anyways I'm looking forward to see your script MarkII.
Regards Bruno
Anyway, "object-fit" and "object-position" are direct attribute from the original of "background-size" and "background-position". So Object-Fit is the alternative of Background-Size and reverse of it.
However, while we moving to modern codes, MS seems forgot how to dance with the wolves, so they can move along with the modern browsers. Most of us are frustrated on how MS deliver their so called "modern browser" to this industry and able to capture all compatibilities that we required all the time.
Only width responsive images, it takes the first size of the data-reactive-image, so the smallest..
Is there a way to always take the original?
IE doesn't seem to listen to this also..
Only width responsive images, it takes the first size of the data-reactive-image, so the smallest..
Is there a way to always take the original?
IE doesn't seem to listen to this also..
For the explanation of the snippet/code, it was simply make it transparent (opacity: 0) the original <img> tag from the IE browser and take the <img> tag source to "background-image" style to its parent container to create full background image source where the <img> tag still transparent, and over the CSS control allowing the <img> tag to be fluid on the size of its parent container.
Perhaps, you declare something inside your stylesheet that technically stops the image being fluid (responsive) in IE browser.
Thank you for your reply.
No that is not it, i haven't told you that i use Wordpress:)
Somehow the background is set to the smallest size available that Wordpress is automaticly generated for each image, here is the example:
http://all-art-design.temp.internetunlimited.nl/
I visit your website... the only thing that I can see was when I tried to resize the browser, the slider don't show anymore.
Another case for the Object-Fit fallback. Before I forgot, Object-Fit requires height to container or image. Then you can apply "Object-Position: Center", though in my understanding the default of Object-Fit is center. Great site!
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.