Home > WeChat Applet > WeChat Development > Image processing in WeChat applet (centered, full screen)

Image processing in WeChat applet (centered, full screen)

hzc
Release: 2020-06-09 16:53:38
forward
10643 people have browsed it

Picture display is a necessary step in mini program design. I see that online teaching is limited, and now I have sorted out the problems that occurred during my own design process, which should be able to solve the problems you encounter.

Use the complete code given at the end and follow my steps to debug it. If not, please contact me.

First give the code and renderings used:

First give the home.wxml program:

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </image>
</view>
Copy after login

1. Center the picture (top of the screen):

//.wxss里的参数
.imagesize{
 display:flex;                    //flex布局
 justify-content: center;         //水平轴线居中
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}
Copy after login

Image processing in WeChat applet (centered, full screen)

#The image size set above is only for the convenience of seeing the actual effect.

2. The picture is centered (in the middle, the position is adjustable→height and align-items)

.imagesize{
 display:flex;
 height: 600px;                    //flex布局高度
 justify-content: center;        
 align-items:center;                //垂直居中
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}
Copy after login

Image processing in WeChat applet (centered, full screen)

Height value of the above picture They are: 200px 400px 600px

The first two are not applicable to all mobile phone models because the screen size of mobile phones is not fixed.

However, it is very helpful for designing the picture position.

3. The picture is centered (in the middle of the screen)

Code:

page{
   height:100%                        //满屏设置
}
.imagesize{
 display:flex;
 height: 100%;                        //设置布局满屏
 justify-content: center;
 align-items:center;
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}
Copy after login

See the effect:

Image processing in WeChat applet (centered, full screen)

4. Give the complete code (the previous article also has the complete code, just add it to the previous folder):

home.wxml

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </image>
</view>
Copy after login

home.wxss

page{
   height:100%
}
.imagesize{
 display:flex;
 height: 100%;
 justify-content: center;
 align-items:center;
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}
Copy after login

5. Fill the screen:

Speaking of filling the screen alone, mode= is mainly used. 'widthFix'

The specific program segment added is .wxml:

<image src="/images/img21.jpg" class=&#39;in-image&#39; mode=&#39;widthFix&#39;> </image>
Copy after login

and the change of .wxss:

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

Changed a picture for demonstration:

2018071814353890Image processing in WeChat applet (centered, full screen)

Look at the rendering without widthFix:

Image processing in WeChat applet (centered, full screen)

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 Image processing in WeChat applet (centered, full screen). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template