Less / CSS aspect ratio on an html element

gistfile1.txt

// aspect ratio
.try-aspect(@width, @height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (@height / @width) * 100%;
  }
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.sixteen-nine {
  .try-aspect(16, 9);
  background-color: @yellow;
}

// html
<div class="sixteen-nine">
  <div class="content">
    insert content here
    this will maintain a 16:9 aspect ratio
  </div>
</div>