Purpose

Fill containers with stretched background images, and adjust background images depending on the containing element aspect ratio (width / height).

You would use this for responsive websites where a background image provides shape / structure to an element, but only within a certain range of aspect ratio.

To see this code in action, change the viewport to a different size (e.g. mobile-size).

Example