Fixed aspect ratio div
This technique is using the padding of the pseudo-element of .fixed-ratio to set the height of .fixed-ratio. The .content div is made to fill this fixed aspect ratio container.
This works because the top or bottom percentage length of the padding is using a percentage of the width of the containing element, according to the specs. So we can set both height and width from the width of the container.
.fixed-ratio { width: 30em; / This can be any width / position: relative; }
.fixed-ratio::before { content: ''; padding-bottom: 100%; / This is for a square div / display: block; }
.fixed-ratio .content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }