Skip to content

Instantly share code, notes, and snippets.

@Loac-fr
Created June 15, 2017 07:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Loac-fr/4a26d2357e175bf663998b2be8fc090b to your computer and use it in GitHub Desktop.
Save Loac-fr/4a26d2357e175bf663998b2be8fc090b to your computer and use it in GitHub Desktop.
IE object-fit "polyfill"
// https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3
if ( ! Modernizr.objectfit ) {
$('.post__image-container').each(function () {
var $container = $(this),
imgUrl = $container.find('img').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('compat-object-fit');
}
});
}
// https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3
.post {
&__image-container {
width: 120px; // the same width and height as for the <img>
height: 120px;
&.compat-object-fit {
background-size: cover;
background-position: center center;
.post__featured-image { // hide image if object fit is not supported - opacity to 0 for the link area
opacity: 0;
}
}
}
&__featured-image {
width: 120px;
height: 120px;
object-fit: cover;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment