layui轮播图根据设备宽度图片等比例，高度自适应

丨丨三戒丶2025-05-06 17:53

如图

html代码（注意：lay-filter="carofilter"）

javascript 复制代码

<div class="layui-carousel" id="test10" lay-filter="carofilter">
  <div carousel-item="">
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/1.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/2.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/3.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/4.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/5.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/6.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/7.png"></div>
  </div>
</div>

js代码

javascript 复制代码

<script>
layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //图片轮播
  carousel.render({
    elem: '#test10'
    ,width: '100%'
    ,height: "150px"
    ,interval: 3000
  });

  // 计算图片等比例高度
  function calculateImageHeight() {
    var imgObj = $("#test10").find(".layui-this img");
    if (imgObj.length > 0) {
      var img = new Image();
      img.src = imgObj.attr('src');
      img.onload = function() {
        var originalWidth = this.width;
        var originalHeight = this.height;
        var currentWidth = imgObj.width();
        var ratio = currentWidth / originalWidth;
        var newHeight = originalHeight * ratio;
        // 设置高度
        $("#test10").css('height', newHeight);
      }
    }
  }

  // 初始计算
  calculateImageHeight();

  // 轮播每页都重新计算
  carousel.on('change(carofilter)', function(obj){
    calculateImageHeight();
  });
});
  
//窗口变化是重新加载
$(window).resize(function () {
  window.location.reload()
})
</script>