luamado
8/10/2016 - 3:00 PM

object-fit: cover fallback

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;
   }