Here is a quick tip for creating responsive elements that retain their aspect ratio as they scale.

The problem

In a fixed width layout it is simple to specify both the width and the height of an element:

.rect {
    width: 800px;
    height: 400px;
}

When creating a responsive layout things get trickier, since (to the best of my knowledge) it isn’t possible to specify a percentage based height that is relative to an element’s width. For example the following CSS rule won’t have the desired result, since the height value will be ignored:

.rect {
    width: 100%;
    height: 50%;
}

A solution

However, when we specify a padding-bottom value for the same element, the padding measurement is calculated relative to the element’s width: