tag to fill the screen with the image; the complete code is " "."/> tag to fill the screen with the image; the complete code is " ".">

Home>Article>WeChat Applet> How to fill the entire screen with mini program images?

How to fill the entire screen with mini program images?

烟雨青岚
烟雨青岚 Original
2020-06-16 14:48:09 6340browse

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 thetag

The specific program segment added Yes .wxml:

 

and changes to .wxss:

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

Demo:

How to fill the entire screen with mini program images?

See if it works The rendering of adding widthFix:

How to fill the entire screen with mini program images?

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn