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;
<br>.demoWrapper {<br> padding: 10px;<br> background: white;<br> box-sizing: border-box;<br> resize: horizontal;<br> border: 1px dashed;<br> overflow: auto;<br> max-width: 100%;<br> height: calc(100vh - 16px);<br>}<br><br>div {<br> width: 100%;<br> padding-bottom: 75%;<br> background: gold; /** <-- For the demo **/<br>}<br>
