保持图像纵横比，同时将元素绝对定位在图像顶部（tailwind 纵横比插件）

Question

我正在尝试 position 绝对是图像顶部的标签。 我正在使用纵横比插件来保持图像的纵横比，无论屏幕尺寸如何 https://github.com/tailwindlabs/tailwindcss-aspect-ratio

这是我的尝试： https://play.tailwindcss.com/Vfq5YRNMjM?file=config

正如您所看到的，绿色标签占用了所有 div 空间并且无法正确显示。 如果您从包装器 div 中删除aspect-w-5 aspect-h-2 ，它仍然可以正常工作。

如何使用纵横比 tailwind 插件和 position 元素同时绝对位于图像顶部来保持图像的纵横比？

Answer 1

你能检查下面的代码吗？ 希望它对你有用。

解决方案 1：我们刚刚修改了 position 个相对和绝对元素的结构。 请参考这个链接： https://play.tailwindcss.com/8naf2Yubny

方案二：在绿色标签中加入left-auto bottom-auto w-auto h-auto class。 请参考这个链接： https://play.tailwindcss.com/yor1VczVcg