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;

Check out an example page.