One common problem I face is, maintaining the aspect ratio of a block-level element. Say you have something like a photo gallery, and you want all the items to retain the same aspect ratio within fluid-width columns; a common responsive web design layout problem.
The answer is mind-numbingly simple and I’m blogging it this evening for posterity and in an attemp to help any one else who may have this issue.
I can’t take all the credit, as the technique was taken from the fantastic Zurb Foundation’s “flex-video” component.
Say you have mark-up like the following:
The CSS is simple: set the
height to zero and apply
The value you use for the
padding-bottom depends on the aspect ratio you’re going for.
In my case, I wanted an aspect ratio of 16:9 so to calculate the
padding-bottom value you do the simple calculation of:
(9 ÷ 16) × 100 = 56.25
This means our
padding-bottom should be 56.25%. In our CSS:
And voilà, you should find that your album cover retains its aspect ratio if within a fluid-width container and resizing your viewport. Hope this helps some one!