Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.wrapper-class {
display: block;
position: relative;
overflow: hidden;
height: 0;
// Give parent container a percentile padding to top, to reserve place of image.
// Then just position the child element (image) absolute.
// height px / width px * 100 = ratio in %
// e.g: 536 / 1024 * 100 = 52,344%
padding-top: 52.344%;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; // Optional: if some images of your collection does have a different ratio
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment