Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
aspect ratios in CSS
[style*="--aspect-ratio"] {
aspect-ratio: var(--aspect-ratio);
object-fit: cover;
}
@supports not (aspect-ratio) {
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
}
<figure style="--aspect-ratio: 16/9">
</figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment