Aspect ratio

Keeping the same proportions for fluid width elements is hard with just media queries. This tricks depends on interesting behavior of the padding property:

The size of the padding as a percentage, relative to the width of the containing block.

See the Pen by maciej-kucharski (@maciej-kucharski) on CodePen.

Tasks

Create boxes that keep the following ratios: 16/9, 2/1, 1/2