object-fit: cover fallback
//for content loaded later add commented lines
//$(window).load(function(){
$('.page-header.center-banner').each(function () {
var $container = $(this),
imgUrl = $container.find('img').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('compat-object-fit');
}
});
// });
<section class="page-header center-banner">
<img src="img/banner-home-v4.png" />
</section>
.page-header.center-banner {
margin: 0;
padding: 0;
border: 0 none;
text-align: center;
img {
object-fit: cover;
max-width: 100%;
height: 100%;
}
&.compat-object-fit {
background-size: cover;
background-position: center center;
img { // hide image if object fit is not supported - opacity to 0 for the link area
opacity: 0;
}
}
}
.page-header.center-banner {
margin: 0;
padding: 0;
border: 0 none;
text-align: center; }
.page-header.center-banner img {
object-fit: cover;
max-width: 100%;
height: 100%;
}
.page-header.center-banner.compat-object-fit {
background-size: cover;
background-position: center center;
}
.page-header.center-banner.compat-object-fit img {
/*hide image if object fit is not supported - opacity to 0 for the link area*/
opacity: 0;
}
object-fit: cover fallback for IE