I quite like this little trick from Noam Rosenthal:
Content goes here
Two things going on there:
- As soon as you give a
viewBox, it goes full-width, but only as tall as the implied aspect ratio in the
viewBoxvalue is essentially “top, left, width, height” for the coordinate system interally to the SVG, but it has the side-effect of sizing the element itself when it has no height of its own. That’s what is used to “push” the parent element into an apsect ratio as well. The parent will still stretch if it has to (e.g. more content than fits), which is good.
- CSS Grid is used to place both elements on top of each other, and the source order keeps the content on top.