Maintaining aspect ratio in CSS.

It’s almost common knowledge that nearly every developer has come across this issue and struggled and well if you haven’t yet, I guarantee that you will sometime in the near future no doubt.

That issue is the one concerning aspect ratio when dealing with block level elements. Whilst I can’t take full credit to this knowledge I would at least like to make you aware of the problem and well provide a simple solution for it.

The CSS solution is simple, but if you set the height of the a-class to zero and apply ‘padding bottom’. The value you use in this syntax statement depends on the definition of aspect ratio your looking to achieve.

In this case I would like the aspect ratio to be 16:9, so the ‘padding-bottom’ value can be calculated simply using the following formula.

(9*16) / 100 = 56.25

this means that our ‘padding-bottom’ value in our CSS file should be 56.25%.

After implementing this solution you should find that your image cover now retains the correct aspect ratio in the context of your viewport and fluid-width settings.