微信小程序让image图片居中显示和铺满全屏幕的方法

导读：

最近开发微信小程序，遇到了图片的一些问题，比如在某些界面中要求图片水平居中、垂直居中，在某些界面中要求图片铺满全屏幕。

.wxml文件

<view class='imagebox'>
  <image src="/images/1.png" mode="widthFix">
  </image>
</view>

.wxss文件

1、图片水平居中

.imagebox{
 display:flex;    /*设置为flex布局*/
 justify-content: center; /*水平居中*/
}
.imagebox image { 
  width:300rpx;
  height:300rpx;
 }

2、图片垂直居中

.imagebox{
 display:flex;
 height: 500px; 
 justify-content: center;/*水平居中*/        
 align-items:center;  /*垂直居中*/
 
}
.imagebox image { 
  width:300rpx;
  height:300rpx;
}

3.图片居中铺满全屏幕

page{
   height:100%; /*设置高度100%，达到满屏状态*/
}
.imagebox{
 display:flex;
 height: 100%;/*重点，铺满全屏*/
 justify-content: center;
 align-items:center;
 
}
.imagebox image { 
  width:300rpx;
  height:300rpx;
}