Aspect Ratio Boxes

The proportions of these blocks remain the same, even when their size changes. This is possible by changing the top padding to a percentage, which is based on the width of the container. Yeah, this sounds super weird, but it works! Try it by resizing this window. To learn more, read this article by Chris Coyier.

Clone this project here.

Simple Boxes

1:1 Aspect Ratio

padding-top: 100%;

4:3 Aspect Ratio

padding-top: 75%;

3:2 Aspect Ratio

padding-top: 66.66%;

8:5 Aspect Ratio

padding-top: 62.5%;

16:9 Aspect Ratio

padding-top: 56.25%;

21:9 Aspect Ratio

padding-top: 42.85%;

Boxes with Image Container

1:1 Aspect Ratio

padding-top: 100%;

4:3 Aspect Ratio

padding-top: 75%;

3:2 Aspect Ratio

padding-top: 66.66%;

8:5 Aspect Ratio

padding-top: 62.5%;

16:9 Aspect Ratio

padding-top: 56.25%;

21:9 Aspect Ratio

padding-top: 42.85%;