Skip to content

Instantly share code, notes, and snippets.

@DevCodo

DevCodo/object-fit-polyfill

Forked from htmlpluscss/object-fit-polyfill
Created June 6, 2019 05:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DevCodo/b84ce290f5f46579ccbb30e72c8b54ab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DevCodo/b84ce290f5f46579ccbb30e72c8b54ab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
object-fit-polyfill
<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