1, Understanding image components
Because the image has a default fixed width and height, it is not easy for us to adapt the image. Let's solve it together
(1) . using mode: widthFix
widthFix: the width is the same, the height changes automatically, and the width height ratio of the original image is the same.
First, we set the image mode to widthFix, and then add a fixed rpx width to the image, such as 730rpx.
In this way, the picture can also be adaptive.. Because the rpx of the applet itself is an adaptive display unit
(2) . use the bindload binding function to dynamically adapt.
We can bind a function to image. This function, like the bindload description above, can get the width and height of the original image.
Then calculate their aspect ratio.. Then set a width size (rpx), and finally dynamically set the width and height of image through style. The code is as follows:
1. Write the page structure index.wxml:
2. Set data index.js