框架轮播图的自适应高度

最新推荐文章于 2025-08-14 10:45:40 发布

原创最新推荐文章于 2025-08-14 10:45:40 发布 · 735 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #css3

Vant 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用HTML5和CSS3技术来创建一个框架轮播图，并实现其高度根据内容自适应。通过利用Flexbox布局和JavaScript动态调整高度，确保了在不同设备上展示效果良好。

  <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred" :style="{height:h}">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" alt="" width="100%" style="display:'block'">
      </van-swipe-item>
    </van-swipe>

export default {
  data() {
    return {
      h: '210px',
    }
  },
  mounted(){
    //根据屏幕的高度，动态的计算轮播图容器的高度 设置data.h
    let screenW=window.screen.width; //屏幕的宽
    let picW= 750; //图片的宽
    let picH= 400; //图片的高
    let swipeH=Math.floor(picH * screenW / picW)+'px';
    this.h=swipeH;
  }
}