Utilize aspect-ratio property with fallback

[stramel]

There is a new property coming out that is aspect-ratio which easily accomplishes this. https://web.dev/aspect-ratio/

I believe you can do this with a fallback for the majority of browsers.

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;
  }
}

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

We wrote this plugin because we knew that the aspect-ratio was coming to browsers.
In fact we were using it already, but since Safari didn't support it yet we choose to create it as a separate plugin.

One of the main reasons for this as well is that currently you require an extra wrapper div with the aspect-ratio on it. In the future we will likely have this in Tailwind itself, where you can apply it directly to the element, instead of a wrapper element.

The reason why we do this instead of a hack using ::before and ::after is that you can't use those for video and img elements, which is the main use case for this.