uniapp轮播图自适应宽高比例实现

<template>
  <view class="swiper-container">
    <swiper class="swiper" autoplay :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in list" :key="index">
        <image class="image" :src="item.imgUrl" mode="aspectFill" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [ // 轮播图数据，替换为你的图片路径
        { imgUrl: '/static/1.jpg' },
        { imgUrl: '/static/2.jpg' }
      ]
    }
  }
}
</script>

<style>
.swiper-container {
  position: relative;
  width: 100%;
  /* 根据宽高比计算padding-top，例如16:9 => 9/16=56.25% */
  padding-top: 56.25%;
}

.swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
}
</style>

外层容器：使用position: relative和padding-top设置比例。例如，16:9的比例对应padding-top: 56.25%（计算方式：9 ÷ 16 × 100%）。

轮播图定位：swiper组件通过position: absolute填满外层容器，确保宽高自适应。

图片模式：image的mode设为aspectFill，保持比例并覆盖容器，避免变形（可根据需求调整为aspectFit等模式）。

其他比例调整：
修改.swiper-container中的padding-top值即可适配不同比例：

4:3 → padding-top: 75% （3/4 × 100%）

1:1 → padding-top: 100%

3:4 → padding-top: 133.33%