Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* source: https://css-tricks.com/aspect-ratio-boxes/ */
.aspect-ratio-box {
position: relative;
}
.aspect-ratio-box::before {
content: '';
float: left;
padding-top: calc(100% / (var(--aspect-ratio))); /* --aspect-ratio: 16 / 9 */
}
.aspect-ratio-box::after {
content: '';
display: table;
clear: both;
}
.aspect-ratio-box-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment