Keeping aspect-ratio with HTML and no padding tricks
For a long time we’ve been told the only way to have a DOM element keep a fixed aspect ratio without Javascript is with the % padding trick. Like here: https://css-tricks.com/aspect-ratio-boxes/
But what if there was a nicer looking hack to do this?
With a combination of CSS grid and SVG, there is.
We use two important attributes:
- SVG knows how to maintain aspect ratio
- CSS grid knows how to make overlapping items affect each other’s size
So we end up with this:
<style>
.aspectRatioSizer {
display: grid;
}.aspectRatioSizer > * {
grid-area: 1 / 1 / 2 / 2;
}
</style><div class="aspectRatioSizer">
<svg viewBox="0 0 7 2"></svg>
<div>
Content goes here
</div>
</div>
This, no matter how large the grid is, will maintain an aspect-ratio of 7/2, is pretty easy to read, supported on IE11 (with the old grid syntax) and doesn’t require special hacks.
Here is a codepen:
If anyone finds an even simpler way to do this, or issues, I’d love to hear!
(Of course the padding trick may still seem nicer, a matter of taste…)
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
