Tailwindcss: [FEATURE] Aspect Ratio Utilities

[LasseRafn]

How do you feel about aspect ratio utilities? For example a class could be like:

Examples

aspect-16:9

padding-top: 56.25%;

aspect-4:3

padding-top: 75%

aspect-1:1

padding-top: 100%

Usage in HTML

Video that maintains 16:9 aspect ratio, responsively. One could also mix it with responsive classes and switch src to a 4:3 and set aspect ratio to that as well.

<div class="aspect-16:9 w-full relative">
    <iframe src="some-16:9-video-url" class="absolute w-full h-full"></iframe>
</div>

Sadly, one has to apply some positioning, and also width + height to the child for this to work.

Easier usage

One could also automatically apply the relative position, and full width styling to any aspect utility. Maybe even add another utility like .aspect-child.

<div class="aspect-16:9">
    <img src="/images/photoshoot-16-9.jpg" class="aspect-child" />
</div>

Thoughts

I have some doubts about this, considering it feels a little more like a minor component rather than an utility. I totally respect if this is not something that needs to be added to Tailwind core, I just felt like it could potentially add some value. 👍

[hacknug]

Duplicate of #384

[adamwathan]

I use this sort of thing on my own projects too but want to hold off on adding it to core right now. There's a plugin out there though: https://github.com/webdna/tailwindcss-aspect-ratio