Skip to content

Instantly share code, notes, and snippets.

@nntndfrk
Forked from htmlpluscss/object-fit-polyfill
Created August 22, 2019 18:47
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 nntndfrk/9aa67460062d9a8170804120e10aa912 to your computer and use it in GitHub Desktop.
Save nntndfrk/9aa67460062d9a8170804120e10aa912 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