Maintaining Aspect Ratio

07-06-2019

So, maintaining aspect ratio on a responsive element is surprisingly easy! You know how adding padding-top: 50% does not actually add 50% of the original height of the element as padding? Rather it adds 50% of the width of the parent element!

With this in mind we can quickly force elements to maintain their aspect ratio when being resized:

.element {
  width: 100%;
  padding-bottom: 100%;
  height: 0;
}

I use this trick on colordrop.io, to maintain the aspect ratio of the color palettes.

Here's a quick example from colordrop.io:

See the Pen Aspect Ratio Example by Tristan White (@triss90) on CodePen.