How to scale a container in an aspect ratio
Every once in a while you are tasked with the problem of keeping a container in a certain aspect ratio, no matter the width. If you want to style a nifty little icon container for example. Now, how the hell do I keep an aspect ratio automatically on resize without falling back to JS?
Say you have your icon in a container, which changes its width with the viewport and your container should always be a square based on the width of that container, like this:
Now you could style your elements like this:
background-position: center center;
background-size: 100px 100px;
So how the hell does this work???
Padding-bottom is not directly linked to a dimension like width and height, although it has a direction. Padding defines to height of an element if nothing else is declared. 100% defaults to width if no dimension is involved. See where this is headed? The width is taken from the first parent with a defined width. So like this, we can dynamically set the height of something based on a percent amount of the parent's width. Using something larger or smaller then 100% now can define you any wished, fixed aspect ratio.