使用layui的轮播图的时候,会因为图片大小不一,出现图片不能适应轮播图容器,而且layui官方里面也没有说明如何使得图片自适应
其实只需要给图片加个style就行了
<script>
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,height: '600px'//设置容器高度,自行设定
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
</script>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="/image/22128.jpg" class="img" style="width: 100%;height: auto"></div>
<div><img src="/image/25278.jpg" class="img" style="width: 100%;height: auto"></div>
<div><img src="/image/林允儿%20Yoona%204k壁纸_彼岸图网.jpg.jpg" class="img" style="width: 100%;height: auto"></div>
<div><img src="/image/爱情公寓5张伟专业团队4k高清壁纸3840x2160_彼岸图网.jpg" class="img" style="width: 100%;height: auto"></div>
<div><img src="/image/爱情公寓5张伟睿智4k游戏壁纸3840x2160_彼岸图网.jpg" class="img" style="width: 100%;height: auto"></div>
</div>
</div>