Using :after

[desislavsd]

Hey @adamwathan , thanks for your great work!

I just wanted to ask if you have considered using :after element for the padding and what key points made you decide against it?

I usually go with something like this:

[class*="aspect-ratio"] {
  position: relative;
  display: block;
}
[class*="aspect-ratio"]:after{
  content: '';
  display: block;
  padding-bottom: var(--aspect-ratio, 100%);
}
[class*="aspect-ratio"] > * {
  position: absolute;
}
.aspect-ratio-square {
  --aspect-ratio: 100%;
}

The pros of course are that we don't need an extra parent element.

I assume one con is that u cannot target the :after element with other utilities, also this way the selector is a bit stronger, but, while this is subjective, I cannot think of a common enough scenario that this would be a problem. Anyway you made it with purpose and I am just curious 😊

[adamwathan]

Hey! I think the biggest con is that this doesn't work with images as far as I know, since they can't have after/before elements and images are where I use aspect ratios the most.

[RobinMalfait]

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

Going to amend on Adam's comment. Since it doesn't work with images, I think the best solution for now is to keep it as is. It's currently also a separate plugin. I see a future where we stop using this plugin and move it into the core of tailwind once native aspect-ratio works: https://caniuse.com/mdn-css_properties_aspect-ratio

Here is a reproduction with your proposed code that showcases the issue that Adam mentioned regarding images: https://play.tailwindcss.com/dqPLINPKIm

Going to close this for now. If you happen to find a solution that can be applied on the same element and works for images as well then we would be very happy to see if we can implement it that way!

[desislavsd]

Yeah, sure it doesn't work directly on images without a parent element. Thanks for the attention and the quick reply. Wish you all the best!