CSS fix - aspect ratio

css-fix-aspect-ratio.html

<!-- taken from http://stackoverflow.com/a/12121309/351590 -->
<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>
<style>
.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
</style>

CodePen: http://codepen.io/yusufhm/pen/LVPEbN

Aspect ratio calculator: http://andrew.hedges.name/experiments/aspect_ratio/

More Aspect ratio in CSS: http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/

Briefly:

To calculate the percentage needed for any aspect ratio we can use the following formula:

B / (A / 100) = C%

So for 16:9 (where 16 is A and 9 is B):

9 / .16 = 56.25 (%)

And that’s all there is to it!

Some Other Common Ratios

For the not so mathematically inclined, here are some of the percentages for common aspect ratios:

75% = 4:3
66.66% = 3:2
62.5% = 8:5