Fluid HTML/CSS elements width fixed aspect ratio

fluid-ratio.css

/*!
 * fluid-ratio.css
 * Version: 0.1.1
 *
 * @author Alessandro Raffa <contact@alessandroraffa.eu>
 *
 */

.fluid-ratio{
  position:relative;
  margin:0;
  padding:0;
  height:0;
  overflow:hidden;
}

.ratio-1-1{
  padding-bottom: 100%; /* value for 1:1 aspect ratio */
}

.ratio-4-3{
  padding-bottom: 75%; /* value for 4:3 aspect ratio */
}

.ratio-3-2{
  padding-bottom: 66.6666667%; /* value for 3:2 aspect ratio */
}

.ratio-16-9{
  padding-bottom: 56.25%; /* value for 16:9 aspect ratio */
}

.ratio-3-1{
  padding-bottom: 33.3333333%; /* value for 3:1 aspect ratio */
}

.fluid-ratio > :first-child{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin:0;
}

/************
 Usage
  
  <div class="fluid-ratio ratio-16-9">
    <div>This element has 16:9 aspect ratio width fluid width</div>
  </div>
  
 ************/