Utilize `aspect-ratio` property with fallback
stramel opened this issue · 1 comments
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;
}
}
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.