Next.js+Tailwind CSS图片轮播在桌面端与移动端的高度适配问题求助

各位好！我最近在用Next.js、Tailwind CSS搭配Next.js的Image组件做图片轮播，但遇到了挺头疼的适配问题：

• 桌面端上图片的高度实在太大，必须滚动页面才能看到完整的图片
• 移动端里轮播的图片显示完全不正常，没法适配屏幕

我已经尝试了几种方法，但都没解决问题：

• 把轮播容器的高度设为h-screen，可图片还是没法正常贴合屏幕
• 给图片加上了object-cover属性，问题依然存在
• 修改了<Image />组件的layout属性为responsive，还是没起到作用

真心希望有大佬能给点调整思路，让图片能在所有屏幕尺寸上都完美适配！谢谢大家了！

备注：内容来源于stack exchange，提问作者user29810516