How to fill the entire screen with mini program images?

#How to fill the entire screen with mini program images?

##Cover the screen, mainly using the mode='widthFix' attribute in the tag

The specific program segment added Yes .wxml:

<image src="/images/1.jpg" class=&#39;in-image&#39; mode=&#39;widthFix&#39;> </image>

and changes to .wxss:

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

Demo:

See if it works The rendering of adding widthFix:

So it is still very useful.

Since this is the bottom tab window, the picture of complete screen coverage is not displayed.

You can design the startup screen. Of course, taking a picture of the appropriate proportion will affect the actual display effect. There is also a difference between the background color and the picture color that you need to pay attention to when debugging.

Recommended tutorial: "

WeChat Mini Program"

The above is the detailed content of How to fill the entire screen with mini program images?. For more information, please follow other related articles on the PHP Chinese website!