swiper里头的图片怎么居中,怎么显示完全?求大佬解答

小程序 文章 6 天前 0 6 全屏看文
swiper里头的图片怎么居中,怎么显示完全?求大佬解答
框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows 1.03.2006090


以下是代码

(home.wxss).home-swiper-box{  padding20rpx;  }.home-swiper-box .swiper{  height300rpx;  }.home-swiper-box .swiper .swiper-item .image{  height150rpx;  width345rpx;}



(home.wxml)<view class="home-swiper-box">  <swiper indicator-dots="{{indicatorDots}}"        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">        <block wx:for="{{background}}" wx:key="*this">          <swiper-item>          <image src="/uploads/cj/article/2020/07/30/f2b9489db529658d9122e50985cd3c3c.jpg" mode="widthFix" ></image>            <!-- <view class="swiper-item /uploads/cj/article/2020/07/30/f2b9489db529658d9122e50985cd3c3c.jpg"></view> -->          </swiper-item>        </block>      </swiper>  </view>


(home.js)data: {    background: ['/icons/come.png''/iconsel.png'],    indicatorDots: true,    vertical: false,    autoplay: true,    interval: 2000,    circular: true,    duration: 500  },h后面的都还是原来没变的

Framework type problem type operating system tools version applet bug windows 1.03.2006090 the following is the code( home.wxss ).home-swiper-box{  padding: 20rpx;  }.home-swiper-box .swiper{  height: 300rpx;  }.home-swiper-box .swiper .swiper-item .image{  height: 150rpx;  width: 345rpx; } ( home.wxml )                                                                     ( home.js )data: {    background: ['/icons/ come.png ', '/icons/ rel.png '],    indicatorDots: true,    vertical: false,    autoplay: true, Interval: 2000, circular: true, duration: 500}, the ones after H are still unchanged

回答:

圣殿骑士:
<swiper-item><view class="center">         <image src="/uploads/cj/article/2020/07/30/f2b9489db529658d9122e50985cd3c3c.jpg" mode="widthFix" ></image></view>         </swiper-item>


加个居中就行了

.center {position: relative;width: 690rpx;height: 246rpx;z-index: 9;margin: 0 auto;overflow: hidden;}

-EOF-