本文介绍如何解决Layui轮播图在满屏显示时高度无法自适应导致图片变形的问题。通过计算图片宽高比，结合浏览器可视窗口宽度动态计算并设置轮播图容器高度，实现响应式布局。同时提供完整的JavaScript实例代码，确保在不同屏幕尺寸下图片比例正常显示。
Layui轮播图高度自适应问题背景
在开发官网项目时，遇到了轮播图组件的适配难题。虽然曾尝试自行编写轮播逻辑，但存在一个难以解决的缺陷：当用户从其他页面返回首页时，图片会出现闪烁且无法正确执行轮播效果。随后发现Layui框架提供了成熟的轮播组件，遂决定采用该方案。然而，直接使用时发现图片高度无法根据屏幕尺寸自动调整，导致图片被拉伸变形，显示效果不佳。
针对上述图片高度固定且导致变形的现象，需要采取动态计算高度的策略来实现自适应。
具体实现方案如下：通过JavaScript获取原始图片的宽高比例，并结合当前浏览器窗口的可视宽度，动态计算出轮播图应有的高度，并在Layui初始化配置中应用该值。
动态计算高度的实现代码
var b = 1920/460;//我的图片比例
//获取浏览器宽度
var W = $(window).width();
var H = $(window).height();
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#banner1'
,width: '100%' //设置容器宽度
,height: (W/b).toString()+"px" //按比例和浏览器可视页面宽度来获取高度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
//窗口变化是重新加载
$(window).resize(function () {
// setBanner();
window.location.reload()
})以上方案提供了基于Layui轮播图实现满屏高度自适应及解决图片变形的完整代码示例，供开发者参考使用。