Skip to content

Instantly share code, notes, and snippets.

@idiazroncero
Created April 3, 2019 10:32
Show Gist options
  • Save idiazroncero/23a6af141d688cf6ffaa5f2d83ac7672 to your computer and use it in GitHub Desktop.
Save idiazroncero/23a6af141d688cf6ffaa5f2d83ac7672 to your computer and use it in GitHub Desktop.
Mixin for object-fit:cover images that fill the parent's size with fallback using absolute positioning.
@mixin img-object-fit(){
position:relative;
overflow:hidden;
img {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width: 100%;
height:auto;
}
@at-root {
@supports(object-fit: cover) {
& img {
object-fit:cover;
position:static;
transform: translate(0, 0);
height: 100%;
width:100%;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment