Fluid element that maintains a specific aspect ratio

aspect-wrapper.css

/* 
Fluid element that maintains a specific aspect ratio 
====================================================
  <div class="aspect-wrapper">
      <div class="inner">
          <img src="image.jpg" alt="Image">
      </div>
  </div>    
*/

.aspect-wrapper {
    position: relative;
    background: red;
    padding-bottom: 56.25%; 
    /* 
    Padding-bottom set the proportion of the wrapper
    Aspect ratio 16:9, 9/16 = .5625 
    */
}

.aspect-wrapper > .inner {
    position: absolute;
    /* 
    Inner content is stretched to the boundaries of the wrapper
    For images be sure to set with: 100%, height: auto 
    */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: blue;
}

.aspect-wrapper > .inner > img {
    width: 100%;
    height: auto;
}
}