Once in awhile I come across a need to control an element's aspect ratio, while giving it the freedom to scale with the layout.
Recently I needed this for an circular icon container, constructed like this;
<div><svg>...</svg></div>
The circle containing the icon needed to scale as a % of its parent, but how to keep the height of that container fixed 1:1 with the width, so that it would remain a perfect circle?
CSS to the Rescue
There are probably several ways to do this in Webflow, and I need to look into them, but I immediately wondered whether CSS has a built-in way to specify aspect-ratio.
And in fact, there is. It's called aspect-ratio.
.element { aspect-ratio: 1 / 1; /* a perfect square */ }
The general format is;
aspect-ratio: auto || <ratio>;
The DIV padding Approach
Another approach commonly seen in responsive sites that use video embeds, is to use nested DIVs with a particular CSS trick for padding.
It looks like this;
