Everyone knows that adaptive image of WeChat applets is a common requirement. Usually, we only need to set it in WEBView.max-width:100%.Although widthFix can also be implemented in WeChat, one drawback is that the width value of the picture must be greater than or equal to the set value, otherwise stretching and deformation will occur. This article adapts to it through another one.
First, let’s take a look at some instructions given by the picture component:
| Attribute name | type | default value | illustrate |
|---|---|---|---|
| src | String | Image resource address | |
| mode | String | 'scaleToFill' | Image cropping and scaling mode |
| binderror | HandleEvent | When an error occurs, the event name posted to the AppService, event object = {errMsg: 'something wrong'} | |
| bindload | HandleEvent | When the image is loaded, the event name posted to the AppService, event object = {height:'image height px', width:'image width px'} |
Note:The image component has a default width of 300px and a height of 225px.
There are 13 modes, of which 4 are the scaling mode and 9 are the cropping mode.
| model | illustrate |
|---|---|
| scaleToFill | Scaling the image without maintaining aspect ratio, so that the width and height of the image are fully stretched to fill the image element |
| aspectFit | Keep the aspect ratio to zoom the picture so that the long sides of the picture can be fully displayed. That is to say, the picture can be displayed in full. |
| aspectFill | Keep the aspect ratio to zoom the picture, and only ensure that the short sides of the picture can be fully displayed. That is, the image is usually complete only in the horizontal or vertical direction, and intercept will occur in the other direction. |
| widthFix | The width remains unchanged, the height changes automatically, keeping the aspect ratio of the original image unchanged |
If there is a more suitable solution, it is probably widthFix. However, in the above modes, the required premise is to set a width value or a height value for the image label. But sometimes we don’t want to limit the width and height of the picture at all. What we need is that the picture itself can adapt according to its size.
The widthFix mode requires you to set a width value first. What if the picture is smaller than the given width? At this time, the picture will stretch.(Commonly used in articles, because the illustrations in the article may be smaller than the default ones, such as common expressions).
In fact, in the above label, the picture reserves a function bindLoad for us. Let’s see how I support adaptiveness.
There is a prerequisite, that is, when there are multiple pictures, you need to know that the picture is in the index in all positions, and we use this position to save the width and height of the picture.
<image src="/bmiddle/" bindLoad="imageLoad" style="width:{{imageSize[0].width}}rpx; height:{{imageSize[0].height}}rpx" data-index="0" mode="scaleToFill"/>
<image src="/bmiddle/" bindLoad="imageLoad" style="width:{{imageSize[1].width}}rpx; height:{{imageSize[1].height}}rpx" data-index="1" mode="scaleToFill"/>
var px2rpx = 2, windowWidth=375;
page({
data:{
imageSize:{}
},
onLoad:function(options){
({
success: function(res) {
windowWidth = ;
px2rpx = 750 / windowWidth;
}
})
},
imageLoad:function(e){
//Unit rpx var originWidth = *px2rpx,
originHeight = *px2rpx,
ratio = originWidth/originHeight;
var viewWidth = 710,viewHeight//Set an initial width //When its width is greater than the initial width, the actual effect is consistent with mode=widthFix if(originWidth>= viewWidth){
//The width is equal to viewWidth, you only need to find the height to achieve adaptive viewHeight = viewWidth/ratio;
}else{
//If the width is smaller than the initial value, do not scale at this time viewWidth = originWidth;
viewHeight = originHeight;
}
var imageSize = ;
imageSize[] = {
width:viewWidth,
height:viewHeight
}
({
imageSize:imageSize
})
}
})
If our picture not only limits the width, but also limits the height value, for example, we limit max-height and so on. Then our imageLoad function needs to be adjusted to output according to their aspect ratio.
imageLoad:function(e){
var originWidth = * px2rpx,
originHeight= *px2rpx,
ratio = originWidth/originHeight ;
var viewWidth = 220,viewHeight = 165, viewRatio = viewWidth/viewHeight;
if(ratio>=viewRatio){
if(originWidth>=viewWidth){
viewHeight = viewWidth/ratio;
}else{
viewWidth = originWidth;
viewHeight = originHeight
}
}else{
if(originWidth>=viewWidth){
viewWidth = viewRatio*originHeight
}else{
viewWidth = viewRatio*originWidth;
viewHeight = viewRatio*originHeight;
}
}
var image = ;
image[]={
width:viewWidth,
height:viewHeight
}
({
imageSize:image
})
},
Appendix: Preview of small pictures and enter full screen mode.
Use the preview image API,(OBJECT)The following is the corresponding code, style part, and layout it yourself.
html code:
<view class="wrap">
<image wx:for="{{pictures}}" wx:key="unique" src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>
JS
Page({
data: {
pictures: [
'/movie/',
'/movie/',
'/movie/',
'/movie/',
'/movie/',
'/movie/',
'/movie/',
'/movie/'
]
},
previewImage: function(e){
var that = this,
index = ,
pictures = ;
({
current: pictures[index],
urls: pictures
})
}
})
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate.