CSS Aspect Ratio with Fallback

css-aspect-ratio-with-fallback.html

<!--
  CSS Aspect Ratio with Fallback by Una Kravets
  Source: https://codepen.io/una/pen/BazyaOM
-->

<div>I am always 16x9</div>

<style>
div {
  background: lightblue;
  width: 100%;
  
  //   New aspect-ratio property
  aspect-ratio: 16 / 9;
}

// Fallback (current, using padding hack)
@supports not (aspect-ratio: 16 / 9) { 
  div::before {
    float: left;
    padding-top: 56.25%;
    content: '';
  }
  
  div::after {
    display: block;
    content: '';
    clear: both;
  }
}
</style>