Skip to content

Instantly share code, notes, and snippets.

@htmlpluscss
Created November 3, 2018 06:44
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save htmlpluscss/ecbae2d4059f5fc1338b28c6b7a0bbf2 to your computer and use it in GitHub Desktop.
Save htmlpluscss/ecbae2d4059f5fc1338b28c6b7a0bbf2 to your computer and use it in GitHub Desktop.
<style>
.object-fit img {
object-fit: cover;
width: 30%;
height: 100px;
}
.object-fit--polyfill {
background-size: cover;
}
.object-fit--polyfill img {
opacity: 0;
}
</style>
<div class="object-fit">
<img scr="images.jpg" alt="">
</div>
<script>
if('objectFit' in document.documentElement.style === false)
{
Array.prototype.forEach.call(document.querySelectorAll('.object-fit'),function(el){
var image = el.querySelector('img');
el.style.backgroundImage = 'url("'+image.src+'")';
el.classList.add('object-fit--polyfill');
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment