1.輪播圖外層容器swiper,每一個輪播項swiper-item
2.swiper標簽存在默認樣式
width 100%
height 150px
image 存在默認寬度和高度 320*240
swiper 高度無法實現由內容撐開
3.綜上,需先根據原圖的寬度和高度 等比例給swiper定寬度和高度
假定:原圖寬度和高度為 640 * 200px
swiper 寬度 / swiper 高度 = 原圖的寬度 / 原圖的高度
則 swiper 高度 = swiper 寬度 * 原圖的高度 / 原圖的寬度
即 height: 100vw * 200 / 640
4.css樣式
swiper{
width: 100%;
height: calc(100vw * 200 / 640);
}
image{
width: 100%;
}
5.給image標簽添加mode屬性:mode="widthFix"
寬度100%,高度自適應