微信小程序让image图片居中显示和铺满全屏幕的方法 |
您所在的位置：网站首页 › 设置图片居中显示 › 微信小程序让image图片居中显示和铺满全屏幕的方法 |
|
导读：
最近开发微信小程序，遇到了图片的一些问题，比如在某些界面中要求图片水平居中、垂直居中，在某些界面中要求图片铺满全屏幕。 .wxml文件 .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; }
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |