图片展示的是小程序开发不可或缺的环节，我发现网络上的教程相对较少，因此我整理了自己在设计过程中遇到的问题，相信这些内容能够帮助你解决所面临的问题。

依据您提供的完整代码，遵循您的操作步骤，您必定能够成功调试。若遇到困难，请随时与我联系。

先给用到的代码以及效果图：

先给home.wxml程序：

1.图片居中（屏幕顶部）：

在.wxss文件中，我们定义了.imagesize类，它采用了flex布局，并且通过justify-content属性实现了水平轴线的居中。对于.imagesize类下的image元素，我们设置了其宽度和高度均为400rpx。

上面设置的图片尺寸，仅仅是为了方便看到实际的效果。

2.图片居中（中部，位置可调 → 和 -）

.imagesize样式定义了flex布局，并设定了高度为600像素，同时使用justify-content属性使内容水平居中，align-items属性确保内容垂直居中。对于.imagesize内部的image元素，其宽度被设置为400rpx，高度同样为400rpx。

图中的数值分别是：                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

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

但是，对于设计图片位置很有帮助。

3.图片居中（屏幕正中间）

代码：

页面高度设置为100%，实现全屏展示。样式规则中，.imagesize类定义了布局方式，同样采用全屏高度。在布局中，内容居中显示，既水平居中又垂直居中。具体到图片元素，其宽度和高度均被固定为400rpx。

看效果：

请提供完整的程序代码（前文中同样附有完整代码，现在只需将新代码加入至之前的文件夹中即可）。

home.wxml

home.wxss

页面高度设置为100%，图像尺寸类则采用弹性布局，同样占据100%的高度，并使内容居中显示。在该类中，图像元素的宽度与高度均为400rpx。

5.铺满屏幕：

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

具体加在的程序段是.wxml：

以及.wxss的改变：

页面高度设置为100%，其中图像尺寸属性包括：以flex布局显示，高度同样为100%，内容居中，对齐方式为居中。

换了一张图做演示：

看看不加的效果图：

所以还是很有用的。

这里由于是底部tab窗口，所以没有显示完整屏幕覆盖的图。

设计启动画面是可行的，但需注意，选取恰当的图片比例对最终显示效果有显著影响。此外，背景与图片色彩的协调性在调试过程中也应引起你的关注。

转载请联系我：

小程序