The width of the image in the applet is 100%, and the height is self-adaptive

I put a few pictures when making carousel pictures, but the display is always weird, the width is not full, and there is always a large blank space on the right, which is ugly. I tried all the mode attributes at the beginning, but it didn’t work. As for the mode attribute What is the role? You can check the API description of the applet component, which is mainly used to control the display mode of the picture.
Is there a way to fill the width of the image?
Later in the test, we found that if we don’t set the width and height for the image, the image image of the WeChat applet has a default width and height: width: 320px and height: 240px. I didn’t know it at the beginning The height and width come from that, and I didn’t set a style for him. It turns out that the applet will give him a style by default. So if you want his width to be full, you can only write the style yourself to control it.

<image mode="widthFix" src="{
    
    {item}}" class="imageStyle10"/>

Add style in wxss style.

.imageStyle10{
    
    
  width: 100%;
}