小程序图片铺满整个view的方法

`

`


1.图片居中(屏幕顶部):

//.wxss里的参数
.imagesize{
 display:flex;                    //flex布局
 justify-content: center;         //水平轴线居中
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
  }

\20180718115330252.png


2.图片居中(中部,位置可调 →height 和 align-items)

.imagesize{
 display:flex;
 height: 600px;                    //flex布局高度
 justify-content: center;        
 align-items:center;                //垂直居中

}
.imagesize image { 
  width:400rpx;
  height:400rpx;
  }

\20180718134752570.png

上图的height值分别为: 200px 400px 600px

前两种都不适用全部型号手机,因为手机屏幕尺寸不固定。


3.图片居中(屏幕正中间)

  page{
   height:100%                        //满屏设置
}
.imagesize{
 display:flex;
 height: 100%;                        //设置布局满屏
 justify-content: center;
 align-items:center;

}
.imagesize image { 
  width:400rpx;
  height:400rpx;
  }

\20180718140529656.png


5.铺满屏幕:

单独讲铺满屏幕,主要用到mode='widthFix'

<image src="/images/img21.jpg" class='in-image' mode='widthFix'> </image>

page{
   height:100%
}
.imagesize{
 display:flex;
 height: 100%;
 justify-content: center;
 align-items:center;
评论
...

小明

有来过,666666。

4楼  2017-08-08  23:15发表